Подсказки на изображении

У меня есть изображение и на нем логотипы (это карта), я хочу, чтобы всплывающее окно с информацией о местоположении этого логотипа, когда пользователь наводит указатель мыши на указанный логотип.

Могу ли я сделать это без использования Javascript Framework и, если да, есть ли небольшие библиотеки / сценарии, которые позволят мне сделать такую ​​вещь?

24.08.2008 16:32:34
7 ОТВЕТОВ
РЕШЕНИЕ

Да, вы можете сделать это без Javascript. Используйте карту изображения HTML с атрибутами заголовка, например так:

<img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png">
<map name="logo">
<area shape="rect" href="" coords="52,42,121,65" title="Stack">
<area shape="rect" href="" coords="122,42,245,65" title="Overflow">
</map>

Логотип Stack Overflow относится к карте изображения , которая определяет прямоугольник для каждого из двух слов с помощью areaтега. Элемент каждого areaтега titleопределяет текст, который браузеры обычно отображают в виде всплывающей подсказки. shapeАтрибут может также указать окружность или многоугольник.

8
5.01.2018 13:22:34

Одно только изображение не дает браузеру семантическую информацию о логотипах внутри. Вы можете использовать карту изображения для предоставления координат. Чтобы получить всплывающие подсказки, просто примените titleатрибут к каждой ссылке. Для более сложных подсказок (например, со стилем, несколькими строками и т. Д.) Вам понадобится что-то нестандартное, например UniTip .

5
24.08.2008 16:35:42

У MooTools есть отличный скрипт для этого. Смотрите MooTools Советы . Облегчен и для HTML.

Вот демо версии 1.11.

4
24.08.2008 16:40:08

titleАтрибут является самым простым решением , и гарантированно работать, и Degrade грациозно для useragents , которые не поддерживают его правильно.

7
24.08.2008 17:27:44

Действительно, mootools - это одна из многих сред,
которые позволяют добавлять функциональность к любому элементу на
вашей веб-странице. Вот ссылка на небольшой учебник.
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips

Mootools на самом деле не является фреймворком типа копирования-вставки,
он поощряет вас просмотреть предоставленный код и найти
собственное решение с несколькими отличными примерами.

3
6.10.2008 09:10:09

Вы можете попробовать виджет JavaScript на http://www.taggify.net/ . Скрипт позволяет добавлять всплывающие подсказки для части изображения - когда пользователь наводит курсор мыши на область на фотографии, сценарий всплывает всплывающая подсказка, рисует границу вокруг области и затемняет другие части. Классная вещь для пометки людей на фото. Смотрите демо на http://www.taggify.net/demo.aspx

2
12.03.2009 16:11:57

Вы можете использовать titleатрибут для простой подсказки. это работает почти на всех объектах DOM.

1
5.01.2018 13:22:55