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

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

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

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

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

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

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

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

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

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

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

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

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

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

#picture{ position:relative; top:20px; width:700px; height:466px; margin:0px auto; background:#FFF url('office.jpg'); overflow:hidden; }

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

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

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

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

<div class="more" id="couch">
<!—id относится к определенному элементу -->
<a href="#"><img src="more.png"/></a>
<!—определяет изображение кнопки, не меняйте ссылку -->
<span>IKEA Klippan Couch</span>
<!—заголовок кнопки -->
</div>

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

/* основная кнопка «дополнительной информации» */
<span style="white-space: pre;"> </span>
.more{ position:absolute; width:50px; height:50px; background:url('dim.png'); border:1px solid #444; padding:5px; text-align:left; overflow:hidden; }
.more span{ position:absolute; left:60px; width:160px; padding:15px 0 0 5px; color:#FFF; font:bold 13px Lucida Grande, Arial, sans-serif; text-shadow:#000 1px 1px 0px; }

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

/* отдельная кнопка «дополнительной информации» для объекта */  
#couch{ top:240px; left:75px;} 

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

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

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

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

<!—информационные окна -->
<div id="infobox">
<span class="close"><a href="#"><img src="close.png"/></a></span>
<br/>
<div id="couch_info">
<img src="klippan.jpg"/><br/>
<a href="http://www.ikea.com/us/en/catalog/products/10138530">IKEA Klippan Couch</a>
</div>
</div>
<!—затемненный фон -->
<div id="fade_bg">&nbsp;
</div>

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

/* основное информационное окно */  
#infobox{ position:absolute; bottombottom:-200px; left: 350px; height:200px; width:300px; z-index:20; margin:0 0 -100px -150px; background:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }  
#infobox a, #infobox a:visited{ font:italic 16px Georgia, serif; color:#555; text-decoration:none; }  
#infobox a:hover{ text-decoration:underline; }  
span.close{position:absolute; rightright:5px; top:5px;}  
#fade_bg{ position:absolute; z-index:15; width:100%; height:100%; background:url('dim.png'); display:none;}  

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

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

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

//затуманиваем ссылки (предотвращается контурность)
$('a').click(function() {
this.blur();
});

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

//скрываем все описания предметов в информационном окне
$("#infobox > div").css("display", "none");

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

//вызов информационного окна
$(".more a").click(function(){
$("#infobox").animate({bottom: '233px' }, 300);
$("#fade_bg").fadeIn();
return false;
});

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

//растянуть информационную кнопку при проведении мышью
$(".more").hover(function(){
$(this).stop().animate({width: '225px' }, 200).css({'z-index' : '10'});
}, function () {
$(this).stop().animate({width: '50px' }, 200).css({'z-index' : '1'});
});

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

//показать описание выбранного предмета
$("#couch a").click(function(){
$("#couch_info").show();
});

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

//удаление фона, информационного окна и скрытие всех описаний
$("#fade_bg, .close").click(function(){
$("#fade_bg").fadeOut();
$("#infobox").animate({bottom: '-200px' }, 300, function() {
$("#infobox > div").css("display", "none");
});
return false;
});

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

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

Автор: Sam Dunn

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

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

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree