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