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

StackOverflow https://stackoverflow.com/questions/25161

  •  09-06-2019
  •  | 
  •  

Вопрос

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

Могу ли я сделать это без использования инфраструктуры 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>

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

Другие советы

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

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

У 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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top