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

Question

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

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

Answer 1

Да, вы можете сделать это без 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. Каждый элемент title тега area указывает текст, который браузеры обычно отображают как всплывающую подсказку. Атрибут shape также может указывать круг или многоугольник.

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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