Создаем интерактивную картинку с помощью jQuery

интерактивные картинки

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

На создание этого учебника меня вдохновил вебсайт IKEA, где для выполнения чего-то подобного применяется Flash, хотя следует отметить присутствие некоторых дополнительных особенностей.

Онлайн-учебник

интерактивные картинки

скачать исходникидемо

Этот учебник продемонстрирует вам, как спланировать основную структуру вашей собственной интерактивной картинки.

Создать и разместить кнопки «дополнительной информации».

Добавить кнопкам заголовки.

Привязать кнопки к описаниям во всплывающих информационных окнах.

Эффективнее всего применять этот учебник в качестве инструкции по модифицированию закачиваемых файлов под требования заказчика.

Установите свою картинку

Перед тем, как размещать какие-либо кнопки, нужно подготовить изображение (я выбрал картинку нашего офиса). Давайте создадим div #picture, который послужит нам в качестве холста.

Вам придется подогнать под нужное изображение размеры и фон. Все, что мы станем делать, будет происходить внутри этого тэга div.

Разместите информационные кнопки

Если вы уделили время просмотру демо-ролика, то, возможно, также заметили большие кнопки «+», разбросанные по картинке. Эти кнопки станут основой всего, что мы делаем, действуя внутри изображения в качестве маркеров.

Как уже сказано, вот структура HTML кнопки-образца, дополненная поясняющими комментариями.

Каждой кнопке требуется несколько стилей CSS, первый – это общий стиль кнопок, который вам, возможно, совсем не придется подгонять, или подогнать совсем чуть-чуть.

Второй фрагмент кода, влияющий на кнопку – это уникальный CSS, размещающий кнопку поверх соответствующей области изображения.

Используя эту структуру, можно сделать столько кнопок, сколько необходимо в изображении. В разделе jQuery мы еще раз к ним вернемся и заставим заголовки появляться при наведении мыши на кнопки.

Информационное окно

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

HTML-код для этого нужен следующий:

Чтобы добиться этого, CSS располагает информационное окно в мертвой точке изображения, смещает кнопку закрытия вправо и затеняет часть рисунка полупрозрачным затемняющим png’ом. (Примечание: Это будет запускаться с помощью jQuery, так что пока ничего не видно).

Сборка с помощью jQuery

Вот он – момент, когда привлекается jQuery, и это прорыв – на старт, внимание, марш!

Так при щелчке на ссылки удаляются пунктирные синие линии во всех браузерах.

Чтобы уменьшить количество разметки, мы применяем одно информационное окно для всех описаний объектов и скрываем те, которые в данный момент не используются. Эта строка проходит по всей разметке и по умолчанию скрывает div’ы, содержащие #infobox, при загрузке страницы.

При нажатии кнопки запускается и всплывает снизу информационное окно. Затемненный фон также постепенно становится менее ярким, а заканчивается функция возвратом false, так что на самом деле ссылка не исполняется.

Когда посетитель проводит мышью над информационной кнопкой, та растягивается и показывает свой заголовок. Тут вы можете настроить точную ширину, на которую она увеличивается или уменьшается. Для предотвращения наложения кнопок та из них, над которой проводят мышью, временно получает высокий z-index.

Пример функции показа описания предмета – вам придется продублировать ее для каждой имеющейся у вас кнопки. Так отображается нужное описание предмета в информационном окне, когда то становится видимым.

Когда щелкают на затемненный фон или кнопку закрытия, информационное окно и фон исчезают, и все описания снова скрываются.

Окончательный результат

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

Автор: Sam Dunn

Источник: //buildinternet.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (19)