Всім привіт. З Вами Бернацький Андрій.
У цьому уроці я розповім про те, як створювати карти-зображень в HTML.
Карта-зображення – це якась картинка, може бути фотографія, яка має кілька активних зон.
Наприклад, при натисканні миші на активну зону переходимо на певний URL. Якщо сидите в vkontakte.ru там приклад карти-зображення – це коли відзначають на фотографії, і при наведенні курсору миші на людину, зазначеного на фотографії, показується його ім’я та прізвище, а при клацанні миші відбувається перехід на сторінку цієї людини.
Спочатку пропоную Вам відео версію даного уроку:
Відео версія уроку
Робиться це все досить просто. Беремо будь-яку фотографію з друзями. Краще вставити її в свій окремий блок
Я взяв для прикладу свою фотографію.
Для 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» вже знайомі параметри. Зупинятися на них не буду.
Повний код наведений нижче:
Тепер при клацанні миші на зображенні по мені, буде здійснено перехід на www.webformyself.com.
Якщо потрібно кілька активних зон, то просто додаємо нові теги
і описуємо їх так, як буде потрібно.
На цьому, випуск присвячений створенню карт-зображень в HTML, завершимо.
До зустрічі в наступних уроках.
Нагадую Вам про те, що Ви можете завантажити відео версії даного уроку собі на комп’ютер за посиланням:
Відео версія уроку
