Новости Joomla

Вышли релизы Joomla 5.1.0 и Joomla 4.4.4

Проблема с id в URL материалов Joomla при обновлении большого старого сайта до Joomla 5

В старых версиях Joomla URL адрес формировался по схеме [id материала + алиас материала]. Например, 145-my-article-alias. Однако. старый роутер Joomla был не идеален и плодил дубли страниц, с чем усиленно боролись СЕО специалисты с помощью различных плагинов и хаков ядра CMS.

Используем поля Joomla для фильтрации материалов

Перевод статьи одного из разработчиков ядра Joomla Брайана Тимэна (Brian Teeman).

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

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Вывод описание по картинки?
« : 10.01.2019, 10:32:27 »
Добрый день,
Подскажите пожалуйста, незнаю как правильно тему назвать.
Впервые столкнулся, подскажите хотя бы в каком направлении копать и пример.

Есть картинка (фото) и на ней цифры - при наведении на цифры появляется надпись ?

Фото в прикрепленном.
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

Olg

  • Завсегдатай
  • 1170
  • 88 / 2
Re: Вывод описание по картинки?
« Ответ #1 : 10.01.2019, 11:59:28 »
Image map. 1, 2 и т.д. и т.п.
Записан
*

xpank

  • Захожу иногда
  • 448
  • 41 / 0
Re: Вывод описание по картинки?
« Ответ #2 : 10.01.2019, 12:27:28 »
Если я правильно понял, то нужно что-то вроде title, но с поддержкой вывода изображений. Например так:
http://www.sevelweb.ru/vsplyivayushhee-okno-pri-navedenii-na-ssyilku-ili-na-kartinku/

Или только надпись и все? Название? Тогда можно обойтись и просто title:
Код
<p title="Всплывающая подсказка!">Наведи на меня мышкой!</p>
Или с оформлением
http://htmlbook.ru/blog/Vsplyvayushchaya-podskazka-na-css
« Последнее редактирование: 10.01.2019, 12:31:58 от xpank »
Записан
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Вывод описание по картинки?
« Ответ #3 : 10.01.2019, 16:04:08 »
Цитата: Olg от 10.01.2019, 11:59:28
Image map. 1, 2 и т.д. и т.п.
Да типа такого, на сколько вижу- долго придется делать.
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Вывод описание по картинки?
« Ответ #4 : 10.01.2019, 16:07:37 »
Цитата: xpank от 10.01.2019, 12:27:28
Если я правильно понял, то нужно что-то вроде title, но с поддержкой вывода изображений. Например так:
http://www.sevelweb.ru/vsplyivayushhee-okno-pri-navedenii-na-ssyilku-ili-na-kartinku/

Или только надпись и все? Название? Тогда можно обойтись и просто title:
Код
<p title="Всплывающая подсказка!">Наведи на меня мышкой!</p>
Или с оформлением
http://htmlbook.ru/blog/Vsplyvayushchaya-podskazka-na-css

Нет не подходит - обычный title.

Выложил криншот, на нем цифры.
При наведении на 1 - один текст;
При наведении на 2 - другой текст;
При наведении на 3 - третий текст и т.д.
И таких точек произвольно расположенных на фото, картинки - может быть и 20,30 и т.д.

Мне бы пример этого, любой.

Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

xpank

  • Захожу иногда
  • 448
  • 41 / 0
Re: Вывод описание по картинки?
« Ответ #5 : 11.01.2019, 11:25:02 »
Цитата: warlocksp от 10.01.2019, 16:07:37
И таких точек произвольно расположенных на фото, картинки - может быть и 20,30 и т.д.
Фишка в том, что на каждую цифру, нужно повесить div с абсолютным позиционированием, и уже на эти div-ы(или ссылки, в зависимости от потребностей) кидать всплывающую информацию.
Вот пример с тремя блоками (в зависимости от стилей используемых на сайте, блоки могут чуть съехать):
Код
<div style="position: relative;font-family: sans-serif;font-size: 14px;color: #fff;"><img src="https://i.ibb.co/4Zg7Z7k/000-RSD01.jpg" alt="000-RSD01" border="0">
<div style="z-index:1;position:absolute;top: 73px;left: 229px;border-radius: 50px;padding: 0px 5px;background: #ff9200;" title="Здесь какая-то информация">1</div>
<div style=" z-index:1; position:absolute;top: 146px;left: 389px;border-radius: 50px;padding: 0px 4px;background: #ff9200;" title="Здесь какая-то информация">2</div>
<div style=" z-index:1; position:absolute;top: 365px;left: 249px;border-radius: 50px;padding: 0px 4px;background: #ff9200;" title="Здесь какая-то информация">3</div>
</div>
P.S. Еще как вариант, можно использовать svg, подготовить в редакторе изображение с точками, а затем сделать их интерактивными и наложить на изображение.

Скопировать, создать текстовый документ, вставить и сохранить поменяв формат на svg. Посмотреть можно в браузере.
Ну или сразу скопировать на https://codepen.io/pen/
Спойлер
[свернуть]
« Последнее редактирование: 11.01.2019, 14:03:10 от xpank »
Записан
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Вывод описание по картинки?
« Ответ #6 : 11.01.2019, 17:40:39 »
Сразу не ответил.
То что нужно, спасибо большое...
Просто вариантов много, запутался как правильно делать.

А если применить, как на http://allodov.net/astralmap/:
Код
<area shape="circle" coords="617,138,27" href="/astralmap/detail/" alt="">

Ваше мнения?
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

xpank

  • Захожу иногда
  • 448
  • 41 / 0
Re: Вывод описание по картинки?
« Ответ #7 : 11.01.2019, 18:05:43 »
Тоже вариант, но тогда для каждого выпадающего окошка нужна отдельная информационная страница, которая и будет выводится в окне. Тут нужно выбирать по потребностям.
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

PHP вывод и замена значения из БД

Автор CityCat

 Ответов: 11
Просмотров: 495 		Последний ответ 29.07.2021, 15:53:58
от CityCat
Вывод img взависимости от url?

Автор warlocksp

 Ответов: 2
Просмотров: 490 		Последний ответ 25.04.2021, 14:50:32
от warlocksp
Вывод данных соглано таблицы Excel

Автор warlocksp

 Ответов: 56
Просмотров: 1845 		Последний ответ 28.02.2019, 23:56:23
от warlocksp
Вывод цены в зависимости от времени и дня недели

Автор baskethome

 Ответов: 6
Просмотров: 1523 		Последний ответ 13.02.2015, 13:51:43
от Arkadiy
jquery.validation: работа с select и вывод сообщений о несоответствиях

Автор AlekVolsk

 Ответов: 15
Просмотров: 4101 		Последний ответ 07.09.2014, 20:57:14
от AlekVolsk