Карта-зображення в HTML

26

Всім привіт. З Вами Бернацький Андрій.

У цьому уроці я розповім про те, як створювати карти-зображень в HTML.

Карта-зображення – це якась картинка, може бути фотографія, яка має кілька активних зон.

Наприклад, при натисканні миші на активну зону переходимо на певний URL. Якщо сидите в vkontakte.ru там приклад карти-зображення – це коли відзначають на фотографії, і при наведенні курсору миші на людину, зазначеного на фотографії, показується його ім’я та прізвище, а при клацанні миші відбувається перехід на сторінку цієї людини.

Спочатку пропоную Вам відео версію даного уроку:

Відео версія уроку

Робиться це все досить просто. Беремо будь-яку фотографію з друзями. Краще вставити її в свій окремий блок

.

Карта-зображення в HTML

Я взяв для прикладу свою фотографію.

Карта-зображення в HTML

Для div задано id для того, що б можна було призначити якісь відступи або ще, що треба буде. Я на своєму прикладі нічого ставити не буду.

Головний параметр у тега img в даному випадку – це usemap=»#img-nav». Він вказує на карту з яким ім’ям ми будемо посилатися.

Далі створюємо саму карту зображення. Карту створює тег . Отже зараз опишемо активну зону, після натискання на яку перейдемо на сайт webformyself.com.

Йдемо по порядку.

— значення параметра name має збігатися зі значенням параметра usemap тега img, тільки у тега map воно записується без символу #.

Далі тег — каже, що зараз виділимо активну зону.

Параметр shape тега — показує, якого типу буде наша область. На те, якою буде наша область, показує значення параметра shape:

rect – вказує, що область буде у вигляді прямокутника.

poly – довільний багатокутник.

circle – область у вигляді кола.

Параметр coords містить координати нашої області.

Якщо shape=»rect», то вказуються координати лівого верхнього кута до правого нижнього. Тобто перша пара чисел вказує на лівий верхній, а друга пара чисел – на правий нижній кут.

Якщо shape=»poly», то вказуються координати кожної вершини многокутника. shape=»poly» coords=»80,100,150,100,210,40,300,40,300,110″ в даному випадку координати першої вершини будуть 80,100, другий 150,100, третій — 210,40, четвертої — 300,40, п’ятої — 300,110.

Якщо shape=»circle» , то вказуємо координати центра і радіус. shape=»circle» coords=»300,300,100″ тут координати центру 300,300 і радіус 100.

Далі параметр shref містить адресу сторінки, або E-mail адресу. Тобто, те ж що і у звичайній посилання.

title=»Andrey» alt=»Andrey» вже знайомі параметри. Зупинятися на них не буду.

Повний код наведений нижче:

Карта-зображення в HTML

Тепер при клацанні миші на зображенні по мені, буде здійснено перехід на www.webformyself.com.

Якщо потрібно кілька активних зон, то просто додаємо нові теги
і описуємо їх так, як буде потрібно.

На цьому, випуск присвячений створенню карт-зображень в HTML, завершимо.

До зустрічі в наступних уроках.

Нагадую Вам про те, що Ви можете завантажити відео версії даного уроку собі на комп’ютер за посиланням:

Відео версія уроку