Створюємо інтерактивну картинку з допомогою jQuery

18

Від автора: у цьому уроці я покажу вам, як звести в єдине ціле інтерактивну картинку – тобто зображення, що містить підказки і блоки. Це може виявитися корисним для подання у вигідному світлі окремих фрагментів фото (тобто предметів або людей).

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

Онлайн-підручник

Створюємо інтерактивну картинку з допомогою jQuery

Створюємо інтерактивну картинку з допомогою jQueryСтворюємо інтерактивну картинку з допомогою jQuery

Цей підручник покаже вам, як спланувати основну структуру вашої власної інтерактивної картинки.

Створити і розмістити кнопки «додаткової інформації».

Додати кнопок заголовки.

Прив’язати кнопки до описів у спливаючих інформаційних вікнах.

Найефективніше застосовувати цей підручник як інструкції по модифікуванню закачуваних файлів під вимоги замовника.

Встановіть свою картинку

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

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

Вам доведеться підігнати під потрібний розміри зображення і фон. Все, що ми будемо робити, буде відбуватися всередині цього тега div.

Розмістіть інформаційні кнопки

Якщо ви приділили час перегляду демо-ролика, то, можливо, також помітили великі кнопки «+», розкидані по картинці. Ці кнопки стануть основою всього, що ми робимо, діючи в межах зображення в якості маркерів.

Як вже сказано, от структура HTML кнопки-зразка, доповнена пояснювальними коментарями.

Створюємо інтерактивну картинку з допомогою jQuery
IKEA Klippan Couch

Кожній кнопці потрібно кілька стилів CSS, перший – це загальний стиль кнопок, що вам, можливо, зовсім не доведеться підганяти, або підігнати зовсім трохи.

/* основна кнопка «додаткової інформації» */

.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-код для цього потрібен наступний:

Створюємо інтерактивну картинку з допомогою jQuery

Створюємо інтерактивну картинку з допомогою jQuery
IKEA Klippan Couch

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

/* основне інформаційне вікно */
#іnfobox{ 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; }
#іnfobox a, #іnfobox a:visited{ font:italic 16px Georgia, serif; color:#555; text-decoration:none; }
#іnfobox 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 и, що містять #іnfobox, при завантаженні сторінки.

//приховуємо всі описи предметів в інформаційному вікні
$(«#іnfobox > div»).css(«display», «none»);

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

//виклик інформаційного вікна
$(«.more a»).click(function(){
$(«#іnfobox»).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();
$(«#іnfobox»).animate({bottom: ‘-200px’ }, 300, function() {
$(«#іnfobox > div»).css(«display», «none»);
});
return false;
});

Остаточний результат

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