Изображения могут быть довольно безжизненными и скучными — если только они не интерактивные и потрясающие. И qTip делает это легко с мощью jQuery. Читайте дальше, чтобы узнать, как вы можете добавлять интерактивные метки, которые появляются, когда пользователь наводит курсор на части изображения.
Зачем тебе это делать? Лично я использую эту технику на новом сайте электронной коммерции, чтобы пользователь мог навести курсор на элементы сцены (например, каталог Ikea), при этом название продукта и кнопка «Добавить в корзину» отображаются динамически. Это также может быть использовано для хорошего эффекта на что-то вроде карты кампуса или города, где есть много элементов странной формы, которые действительно могут быть связаны с описанием, не загромождая карту. Очень простым примером также могут быть теги Facebook, где наведение на лицо человека покажет вам, кто они. Его использование ограничено только вашим воображением.
Примечание: я предполагаю, что здесь вы найдете базовые знания jQuery и HTML — по крайней мере, убедитесь, что вы читали о селекторах. , методы и анонимные функции .
QTIP
qTip — это всесторонний плагин для всплывающих подсказок и надписей для jQuery с различными стилями. Мы будем использовать его специально с функциональностью карты изображений, но это, безусловно, не все, что он может сделать. Взгляните на страницу плагина, чтобы узнать больше, или читайте дальше, чтобы начать.
Создание карты изображений
Сами графические карты, конечно, не новы: элементы разметки доступны уже давно, и еще в те времена это считалось хорошим способом представления навигационной системы — кликабельные части изображения со ссылками на разные разделы , Тот же самый базовый код карты изображения все еще используется для этой части функциональности, поэтому нам нужно сначала определить это.
Вы можете использовать различные инструменты для создания карты изображений — Adobe Fireworks или Photoshop — но самое простое и бесплатное решение — такой онлайн-инструмент, как этот . Это, конечно, не единственный онлайн-инструмент, и я не особо одобряю его, но он казался достаточно простым в использовании — дайте нам знать в комментариях, если найдете лучший. Вы можете определить прямоугольные, круглые или даже многоугольные формы.
Начните с загрузки картинки — в этом случае я собираюсь отметить скриншот веб-сайта . Возможно, вам придется уменьшить масштаб, чтобы просмотреть полное изображение в инструменте.
Должно быть достаточно очевидно, как использовать его как базовую программу рисования — единственное, что нужно помнить, это то, что при рисовании многоугольника вам нужно удерживать SHIFT в последней точке, чтобы закрыть и закончить. Здесь я определил 4 фигуры.
Когда вы будете готовы, прокрутите вниз и скопируйте указанный код.
Создайте новый базовый HTML-документ и немного очистите код, добавив тег изображения, указывающий на исходное изображение. Самый простой способ сделать это — использовать JSFiddle . Вот мой пример , в его начальном состоянии (окончательный набор кодов дается позже, не волнуйтесь).
Не забудьте дать изображению атрибут usemap , указывающий на #id карты, содержащей координаты (например, usemap = ”# mymap” ).
Добавление в qTip
Если вы вставили свой код в JSFiddle, вы увидите, что на боковой панели есть опция для включения jQuery. Убедитесь, что вы включили это. Мы также можем добавить сюда другие внешние ресурсы, поэтому добавьте URL-адреса для CSS и JS, перечисленные на странице загрузки qTip. Скопируйте и вставьте ссылки «все функции и стили» в JSFiddle — хотя на практике вы будете использовать приведенный ниже инструмент конфигурации для создания собственного набора функций или стилей.
Полное руководство по реализации qTip можно найти здесь , но давайте продолжим и создадим несколько простых текстовых подсказок. Следующий Javascript будет нацелен на все элементы области (элементы, которые определяют части нашей карты изображений) при загрузке страницы, сообщая qTip работать с ними с содержимым того, что находится в атрибуте alt.
$(document).ready(function() { $("area").each(function(index, element) { var link = $(this); $(link).qtip({ content: link.attr("alt") }); }); }); 
Дизайн по умолчанию довольно некрасивый — вы можете посмотреть его демонстрацию здесь — но это нормально, давайте применим специальный дизайн к всплывающим окнам, как это (я пропустил часть кода, показывая только определенный раздел qTip).
$(link).qtip({ content: link.attr("alt"), style: { classes: 'qtip-bootstrap qtip-shadow' } });
Я также включил файл BootStrap CSS в качестве внешнего файла, чтобы сортировать уродливые стандартные шрифты браузера. Это очень излишне, я знаю. Еще: намного лучше!
Одна вещь, которую я сейчас замечаю, это то, что позиция по умолчанию внизу справа не совсем идеальна. Чтобы настроить это, давайте использовать настройку позиции:
$(link).qtip({ content: link.attr("alt"), style: { classes: 'qtip-bootstrap qtip-shadow' }, position: { target: 'mouse', adjust: { mouse: true // Can be omitted (eg default behaviour) } } }); });
Теперь наведите курсор мыши на любой элемент, и подсказка будет следовать за вашей мышью. Вы можете посмотреть готовое демо здесь .
Вы также можете сделать модальное всплывающее окно (чтобы все остальное затемнилось, и вам нужно было щелкнуть снаружи, чтобы вернуться к нему), или даже загрузить некоторый контент через запрос AJAX. Я думаю, что это довольно аккуратный маленький плагин, который вдохнет новую жизнь в довольно неиспользуемый стандарт HTML — давайте посмотрим, что вы можете придумать, и, пожалуйста, дайте нам знать в комментариях, если вы что-то сделали с ним.