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

Дата публикации: 2012-02-20

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

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

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

1	#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>

<!—id относится к определенному элементу -->

<!—определяет изображение кнопки, не меняйте ссылку -->

<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; }

/* основная кнопка «дополнительной информации» */

.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;}

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

<!—информационные окна -->
<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="//www.ikea.com/us/en/catalog/products/10138530">IKEA Klippan Couch</a>
</div>
</div>
<!—затемненный фон -->
<div id="fade_bg">&nbsp;
</div>

<!—информационные окна -->

<br/>

<a href="//www.ikea.com/us/en/catalog/products/10138530">IKEA Klippan Couch</a>

</div>

<!—затемненный фон -->

</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;}

/* основное информационное окно */

#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();
});

//затуманиваем ссылки (предотвращается контурность)

$('a').click(function() {

this.blur();

});

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

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

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

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

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

//растянуть информационную кнопку при проведении мышью

$(".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();
});

//показать описание выбранного предмета

$("#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;
});

//удаление фона, информационного окна и скрытие всех описаний

$("#fade_bg, .close").click(function(){

$("#fade_bg").fadeOut();

$("#infobox").animate({bottom: '-200px' }, 300, function() {

$("#infobox > div").css("display", "none");

});

return false;

});

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

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

Автор: Sam Dunn

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее