Новости Joomla

Компонент View logs v.2.1.0 получил совместимость с Joomla 6

Журнал NorrNext. 20 лет Joomla™. Продолжение

Журнал NorrNext. 20 лет Joomla™

Журнал NorrNext. 20 лет Joomla™. Новые интервью 🎈🆕

Продолжаю публиковать новые интервью с волонтёрами и видными персонами из мира Joomla.
Это — огромная и кропотливая работа. Всё для вас, друзья.

Доступны к чтению новые интервью со следующими Joomla активистами (на английском языке):

✔️ Akarawuth Tamrareang (Таиланд) 🇹🇭
✔️ Alison Meeks (Канада) 🇨🇦
✔️ David Aswani (Кения)🇰🇪
✔️ Jeison Ferreira (Бразилия) 🇧🇷
✔️ Marc-Antoine Thevenet (Франция) 🇫🇷
✔️ Richard Gosler (Соединённое Королевство) 🇬🇧
✔️ Roland Dalmulder (Нидерланды) 🇳🇱
✔️ Sakis Terzis (Греция) 🇬🇷
✔️ Sandra Decoux (Франция) 🇫🇷
✔️ Sonny Le (Вьетнам) 🇻🇳
✔️ Svetoslav Slavkov (Болгария) 🇧🇬
✔️ Viviana Menzel (Германия) 🇩🇪

‼️ Новые интервью будут добавляться в этот первый выпуск до декабря. 20-го числа, поэтому периодически проверяйте обновления💡

👉 Читать далее

JL Sitemap v2.1.0 – обновление компонента для карт сайта

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 17 Ответов
  • 2755 Просмотров
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Как сделать кликабельным разные части изображения?
« : 28.03.2018, 07:28:25 »
Как сделать кликабельным разные части изображения, да не просто а масштабирующегося.

На картинке справа сверху вниз идут четыре кнопки, как бы к ним ссылки прикрутить.
Записан
*

Efanych

  • Глобальный модератор
  • 4683
  • 644 / 0
  • Меняю свою жизнь на 360°!
Re: Как сделать кликабельным разные части изображения?
« Ответ #1 : 28.03.2018, 09:19:23 »
position:absolute
Записан
Создание сайтов, шаблонов, помощь в решении проблем.
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Как сделать кликабельным разные части изображения?
« Ответ #2 : 28.03.2018, 15:19:49 »
Цитата: Efanych от 28.03.2018, 09:19:23
position:absolute

Ну а как я ссылки поверх картинки размещу, если сайт адаптивный? Сожмется экран, сожмется картинка, а локи со ссылками нихрена не сожмутся, особенно если они размещены вертикально.
Записан
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: Как сделать кликабельным разные части изображения?
« Ответ #3 : 28.03.2018, 17:17:11 »
ну тут 100500 вариантов.
можно вообще через map сделать, можно через svg.
можно для меньших размеров другое меню выводить.
Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: Как сделать кликабельным разные части изображения?
« Ответ #4 : 28.03.2018, 18:26:16 »
Цитата: dm-krv от 28.03.2018, 15:19:49
Ну а как я ссылки поверх картинки размещу, если сайт адаптивный?
% спасут отца русской демократии.
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Как сделать кликабельным разные части изображения?
« Ответ #5 : 28.03.2018, 19:52:30 »
Цитата: Taatshi от 28.03.2018, 18:26:16
% спасут отца русской демократии.
+ медиа квери для ключевых разрешений экрана

гемор конечно тот еще, но что делать )) Либо да, через svg более универсальный вариант но и сложнее в исполнении
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Как сделать кликабельным разные части изображения?
« Ответ #6 : 29.03.2018, 07:45:36 »
Но насколько я знаю проценты можно только от ширины только указывать, мне что, делать четыре ссылки в нижней части картинки, а потом крутить блок на 90 градусов? Бред какой-то получится. Ладно, буду думы думать, вообще не вариант на картинке кнопки делать, хотя заказщик просит именно это, попробую уговорить на другой вариант.
Записан
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Как сделать кликабельным разные части изображения?
« Ответ #7 : 29.03.2018, 11:49:54 »
делаете блок с позишин релатив, картинку фоном и указать background-size: contain
размеры блока по ширине указать в % от родительского (к примеру 100% ширины контента)
в этом блоке абсолютно позиционировать 3 ссылки в % left\top
получится что при уменьшении размера экрана картинка постоянно будет целиком в этом блоке и ссылки будут соответственно на своих местах

показали б хоть скрин что нужно в итоге получить
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Aleks.Denezh

  • Живу я здесь
  • 3401
  • 428 / 4
Re: Как сделать кликабельным разные части изображения?
« Ответ #8 : 29.03.2018, 12:31:19 »
del
« Последнее редактирование: 04.05.2018, 22:03:21 от Aleks.Denezh »
Записан
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Как сделать кликабельным разные части изображения?
« Ответ #9 : 29.03.2018, 13:22:54 »
О_о я просто не знал, что так можно. Спасибо) Потом покажу, что получилось.
Записан
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Как сделать кликабельным разные части изображения?
« Ответ #10 : 04.04.2018, 19:47:44 »
Ребята! Спасибо) Понял механизм, удалось сделать кликабельные области, сохраняя адаптивность. На картинке полупрозрачным блочной ссылкой обвел надписи, все работает. Блин, как же здорово, когда можно вот так, просто спросить и получить помощь. Обожаю Open Source сообщества. Еще раз, всем спасибо.

Записан
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Как сделать кликабельным разные части изображения?
« Ответ #11 : 05.04.2018, 21:44:44 »
dm-krv всегда рады помочь, но еще бы лучше было бы видеть готовый результат в сети, чтобы понять, собственно, что мы советовали :)
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Как сделать кликабельным разные части изображения?
« Ответ #12 : 05.04.2018, 22:12:44 »
Да собственно там все еще в процессе, но вот пример [ссылка удалена]

На картинке надписи удалось кликабельными сделать именно благодаря Вашей помощи.

Сайт удалю к выходным, это просто копия оригинала, который попросили доработать.
« Последнее редактирование: 07.04.2018, 15:10:09 от dm-krv »
Записан
*

Efanych

  • Глобальный модератор
  • 4683
  • 644 / 0
  • Меняю свою жизнь на 360°!
Re: Как сделать кликабельным разные части изображения?
« Ответ #13 : 06.04.2018, 08:08:55 »
Надписи бы лучше затёрли, а в ссылке добавляли, чтоб при наведении эффект был...
Записан
Создание сайтов, шаблонов, помощь в решении проблем.
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Как сделать кликабельным разные части изображения?
« Ответ #14 : 06.04.2018, 10:55:10 »
Цитата: Efanych от 06.04.2018, 08:08:55
Надписи бы лучше затёрли, а в ссылке добавляли, чтоб при наведении эффект был...

При масштабировании надписи текстом не будут уменьшатся. Конечно, можно текст отдельной картинкой навесить и ховером фон ссылочных блоков менять, но это мороки много. Меня о чем попросили то и сделал, лишний раз возится не хочется) Но в выходные поэксперементирую еще, возможно действительно какой-нибудь эффект стоить добавить для наглядности.
Записан
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Как сделать кликабельным разные части изображения?
« Ответ #15 : 06.04.2018, 13:20:48 »
Код
<a style="position: absolute; display: block; background: rgba(0,0,0,0); border-radius: 5px; width: 35%; height: 7%; margin-left: 35.7%; margin-top: 7.4%;" href="/nasha-produktsiya/industrialnye-masla/plastichnye-smazki"></a>

не надо так делать, создавайте для ссылки класс (один общий для общих стилей и уникальный для каждой ссылки, типа class="item item1") и в файле стилей пишите уже, инлайновый CSS это плохо.

Желтый текст на сером фоне практически нечитаем.
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Как сделать кликабельным разные части изображения?
« Ответ #16 : 06.04.2018, 15:55:15 »
Картинки не мои, что дали, то и вывесил. Почему инлайн это плохо? Не первый раз слышу, но как-то не понимаю почему.
Записан
*

beliyadm

  • Легенда
  • 9758
  • 1665 / 66
  • Севастополь, Россия
Re: Как сделать кликабельным разные части изображения?
« Ответ #17 : 06.04.2018, 20:53:09 »
Цитата: dm-krv от 06.04.2018, 15:55:15
Почему инлайн это плохо? Не первый раз слышу, но как-то не понимаю почему.
потому что если вы потом для этого элемента укажите стили в файле CSS - они не сработают, поскольку инлайновые имеют более высокий приоритет
ну и просто это крайне неудобно, загромождение и дублирование кода. Есть 10 элементов с стилями типа абсолют, указан шрифт размер позиции и тд и отличаются у них только цвет.
Так вот когда вы через класс общий зададите им общие стили и через уникальный только цвет - управлять всем зоопарком будет легче.
Старайтесь никогда не использовать ни инлайновый CSS ни JS
Записан
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать такой сайт на Joomla?

Автор tester124545

 Ответов: 2
Просмотров: 180 		Последний ответ 28.10.2025, 06:03:09
от wishlight
Как сделать :after картинку ссылкой?

Автор Lemonez

 Ответов: 6
Просмотров: 916 		Последний ответ 22.09.2022, 16:36:34
от sivers
Чужие шаблоны на своем сайте. Как сделать также?

Автор tnk

 Ответов: 4
Просмотров: 1509 		Последний ответ 09.05.2018, 18:02:04
от tnk
Функция из модели в публичной части компонента в админке

Автор denism300

 Ответов: 2
Просмотров: 948 		Последний ответ 23.11.2016, 14:01:39
от denism300
Ошибка "Представление не найдено" в публичной части компонента

Автор denism300

 Ответов: 3
Просмотров: 1622 		Последний ответ 15.11.2016, 23:37:41
от denism300