Подсказки к изображению
У меня есть изображение и на нем логотипы (это карта), я хочу, чтобы появилось небольшое всплывающее окно с информацией о местоположении этого логотипа, когда пользователь наводит указатель мыши на указанный логотип.
Могу ли я сделать это без использования фреймворка javascript, и если да, то есть ли какие-нибудь небольшие библиотеки / скрипты, которые позволят мне сделать это?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Одно изображение само по себе не дает браузеру семантической информации о логотипах внутри. Вы можете использовать карта изображений для предоставления координат. Чтобы получить подсказки, просто примените атрибут title к каждой ссылке. Для более сложных всплывающих подсказок (например, со стилями, несколькими строками и т. д.) Вам понадобится что-то нестандартное, например UniTip.
У MooTools для этого есть отличный скрипт. См. Советы по MooTools. Легковесен и в HTML.
Вот демонстрация версии 1.11.
Да, вы можете сделать это без 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>
Логотип переполнения стека относится к карта изображений, который определяет прямоугольник для каждого из двух слов с помощью тега area. Элемент area каждого тега title определяет текст, который браузеры обычно показывают как всплывающую подсказку. Атрибут shape также может указывать на круг или многоугольник.
Действительно, mootools - один из многих фреймворков.
которые позволяют добавлять функциональность к любому элементу на
ваша веб-страница. Вот ссылка на небольшой учебник.
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips
Mootools на самом деле не является фреймворком типа copy-paste,
он побуждает вас просмотреть предоставленный код и
представьте свое собственное решение с помощью отличных примеров.
Вы можете попробовать виджет javascript на http://www.taggify.net/. Скрипт позволяет добавлять всплывающие подсказки для части изображения - когда пользователь наводит указатель мыши на область на фотографии, скрипт открывает всплывающую подсказку, рисует границу вокруг области и затемняет другие части. Классная штука для обозначения людей на фото. См. Демонстрацию на http://www.taggify.net/demo.aspx
вы можете использовать атрибут title для простой всплывающей подсказки. он работает почти со всеми объектами DOM.