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

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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

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

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

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

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

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

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

Автор: Sam Dunn

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

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

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

Комментарии Facebook:

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

  1. Максим

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

  2. Василий

    А где пример того как это работает?

  3. Максим

    Да было бы не плохо сначала увидеть результат
    а потом подумать нужная ли это информация или нет.
    Ведь многое можно зделать и с помощью javascript или vbscript

  4. Виктор

    Искренне благодарю за публикацию THE GOAL в переводе на русский язык.
    Прекрасный конструкция для использования на сайте!

  5. Сергей

    Спасибо огромное! Обязательно добавлю это себе на сайт!
    Автору респект, я восхищен!)

  6. Сергей@идеи бизнеса

    Отлично, подыскивал что-то подобное.
    Теперь понятна реализация.

  7. Сергей

    Замечание! Этот исходник создан конкретно для этой фотографии, то есть код писался подстраиваясь под нее, это плохо, т.к. приходится много возится, для каждого отдельного случая… как можно было додуматься эту картинку объявить в стилях, как бек граунд??!!

    • Олег

      А что плохого в том, что картинку запихнули в background?

      • Сергей

        тем, что человек увидел, хочет запихнуть это себе на сайт, у которого уже своя структура, и добавить нужно картинку а не бек граунд!

        • Андрей Кудлай

          Так а в чем разница? Не вижу принципиального отличия добавлять картинку прописыванием тега img или фоном блока.
          Да и если уж так принципиально, то уберите фон блока и пропишите вывод картинки в коде.

    • Андрей Кудлай

      Логично, подсказки-то у каждой картинки будут свои, а потому позиционировать их нужно будет для каждой конкретной картинки… и с этим ничего не поделаешь.
      Про картинку фоном блока ниже озвучил свое мнение.

  8. Сергей

    Понимаете, там вообще по сути написано в отдельном css файле(просто не отделяли), просто корректно было бы подключать в все эти файлы, а в html только добавлять картинку, никто же не будет создавать такую же точно страничку с одной фоткой, просто меняя фотографии и надписи, а нужно это сделать максимально удобно для каждого!

    • Андрей Кудлай

      Ну стили да, правильнее выносить в отдельный файл. Код jQuery также красивее было бы подключать из отдельного файла… но это все же урок, не готовый продукт… а в учебном процессе такие «вольности», думаю, можно позволить — простим автору :)

      • Сергей

        Конечно простим:)
        Просто раз уж это урок, то следовало бы учить сразу правильно!:)

  9. Сергей

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

  10. Иван

    Извините за прямоту.но я ничего не понял. Сдесь чтото утеряно. Поставить на предметы точки (кнопки) вставить в них ссылки не проблема. А что в итоге? Что должно получиться ? Переходы на интернет магазины ?

    • Андрей Кудлай

      А получиться должно то, что указано в самом начале урока: «изображение, содержащее всплывающие подсказки и блоки», что может пригодиться «для представления в выгодном свете отдельных фрагментов фото (т.е. предметов или людей)».
      Проще говоря, в итоге получается интерактивная картинка, использование которой ограничено лишь Вашей фантазией.

  11. Alex

    За что я люблю jQuery , так это за то что гораздо короче javascript и более удобен.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree