Для чого необхідні карти зображення. Карта-зображення в HTML

Карта зображень (Image Map) дозволяє прив'язувати посилання до фрагментів зображення. Клацаючи мишею на окремих частинах зображення, користувач може переходити з тієї чи іншої посиланням на різні Web-сторінки.

Карта зображення визначається парним тегом … . HTML-документ може містити кілька карт зображення, тому кожній карті повинно бути присвоєно унікальне ім'я, яке визначається атрибутом name.

Карта зображень складається з ділянок зображення і відповідних їм посилань. Описує ділянку зображення і ставить йому у відповідність посилання одиночний тег .

атрибути тегу

Координати за замовчуванням вимірюються в пікселях.

Початок відліку координат - це верхній лівий кут екрану, тобто

Приклади різних форм областей карти зображень

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

Щоб використовувати зображення, як карту, в тег необхідно ввести додатковий атрибут usemap, Що визначає ім'я карти зображення. Перед цим ім'ям ставиться знак "#".

Приклад використання Image Map

При кліки на різні області даного зображення змінюється колір відповідного тексту.

»Я зробив заготовку для розміщення на певних її ділянках посилань на різні web-сторінки (« »)

Тепер якщо клікнути на фігури з написами, то відкриються відповідні їм сторінки: профіль, щоденник або всі пости з розділу «Уроки Photoshop» (увага! Після перенесення блогу на вордпресс і його переробки, посилання не працюють! Але урок залишається актуальним!)

Для того, щоб картинка заробила, я написав приблизно такий HTML-код:

Цей код можна вставити в поле повідомлення (при натиснутій кнопці «Джерело») або в епіграф ...

До речі, є й інші пости по темі: «Що таке HTML »,«HTML-код малюнків ","Картинка-посилання »і так далі.

1. Координати

Щоб скласти вказаний код, трохи згадав геометрію :)

Система координат: вісь X - зверху вниз, вісь Y - зліва направо
Для завдання координат фігури потрібно встановити:
- квадрат (або прямокутник), сторони якого паралельні осях - координати двох протилежних кутів - X1, Y1 і X2, Y2
- багатокутник - координати ВСІХ кутів
- коло - координати центру і радіус.

У моєму випадку, виходить, потрібні координати точок A, C - для посилання «Профіль» (прямокутник), точок D, E, F, G, H - для посилання «Щоденник» (багатокутник), Q і довжина R - для посилання « уроки Photoshop »(коло). Всі ці числа в HTML-коді вгорі виділені червоним кольором. Крім того, потрібно знати розмір зображення у пікселях (зелений колір)

Необхідності в особливій точності немає, тому визначити координати можна з'ясувати за допомогою «лінійки» в Photoshop - для її виклику натискаю Ctrl + R

Мені було цікавіше, щоб хтось інший порахував координати. Для цього запускаю MS Paint (Пуск - Всі програми - Стандартні - Paint) і відкриваю в ньому малюнок. При наведенні курсора на шукані точки в нижній панелі з'являються їх координати, які старанно записую

2. HTML-код

Навігаційні карти задаються тегом

Тег map включає себе теги , Які визначають геометричні області карти-малюнка і пов'язані з ними посилання.

Розібрався я так - для створення навігаційної карти потрібні:

— теги з описом зображення

— теги карти

— теги областей

У моєму випадку, значення виявилися такими:

width \u003d «640» height \u003d «367» - розміри зображення
src \u003d "https: //сайт/f02c73a3cd94.jpg" - адреса зображення на сайті
usemap \u003d "# picture " - умовне найменування зображення-карти (Може бути будь-який)
map name \u003d «Picture» - ім'я карти (повністю відповідає зазначеному вище)

Значення для областей-посилань - href - мета посилання, shape - форма області і coords - координати - відповідають трьом областям (area) на зображенні.

Прямокутник «Профіль»

href \u003d "https: // сайт / profile /" - адреса сторінки профілю
shape \u003d "rect" - позначення форми «прямокутник»
coords \u003d "235,61,472,117" - координати точок A (235,61) і С (472,117)

Багатокутник «Щоденник»

href \u003d "https: // сайт / blog" - адреса сторінки щоденника
shape \u003d "poly" - позначення форми «багатокутник»
coords \u003d "235,118,362,118,474,152,457,207,229,146" - координати кутів багатокутника: точки D (235,118), E (362,118), F (474,152), G (457,207) і H (229,146)

Коло «Уроки Photoshop»

href \u003d "https: //сайт/showjournal.php? journalid \u003d 2447247 & keywordid \u003d 929323" - адреса сторінки постів з розділу «Уроки Photoshop»
shape \u003d "circle" - позначення форми «коло»
coords \u003d "551,198,65" - координати кола: центр - точка Q (551,198) і радіус - R \u003d 65

3. Фініш

Підставив всі отримані значення в «систему» \u200b\u200bHTML-коду для навігаційної карти-зображення і отримав наступне:

Саме цей код при використанні «перетворюється» в картинку з областями-посиланнями.

Для тренування є «полегшений» легкий варіант створення ділянок-посилань - пост «Тренування: області-посилання на зображенні»

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.

У цій статтею ми з Вами розглянемо як скласти клієнтську зображення-карту, якщо клікнути на певну область якої, ми зможемо перейти по певному посиланню. Складання зображень-карт можна рідко зустріти на сайтах, так як цей процес досить-таки трудомісткий, але якщо ви хочете здивувати ваших відвідувачів незвичайною формою для посилань і в вас є в розпорядженні вільний час для самоосвіти, то ця стаття для вас.

тег використовується для визначення зображення-карти. Зображення-карта являє собою зображення з певною активної областю. елемент містить ряд тегів, які визначають інтерактивні області в зображенні-карті, тобто при кліці на певну область зображення відбуваються певні дії, наприклад, відкривається окрема сторінка з описом даної ділянки зображення.

Атрибут name елемента є обов'язковим, він пов'язаний з атрибутом usemap елемента (Створює зв'язок між зображенням і картою).

атрибутами тега ми вказуємо як координати області (атрибут coords), так і тип необхідної нам фігури (атрибут shape):

приклад використання

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

</span>Приклад використання тега <map>

Вибери постать:

"Доступні 4 фігури для вибору" > "Червоний квадрат"> coords \u003d "200,75,50" href \u003d "green.html" alt \u003d "(! LANG: Зелений коло." > !} "Блакитний трикутник"> "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href \u003d "yellow.html" alt \u003d «(! LANG: Жовта зірка" > !}

І так по порядку, що ми зробили в цьому прикладі:

Розмістили зображення (тег ), Яке ми надалі будемо використовувати при складанні зображенні-карти. У атрибуті usemap необхідно обов'язково вказати ім'я зображення-карти, яку ми будемо використовувати в елементі (Необхідно обов'язково перед ім'ям вказати решітку).

Розміщуємо зображення-карту (тег ), Задаємо єдиний і обов'язковий атрибут елемента name (ім'я). Зверніть увагу, що на відміну від тега ми задаємо ім'я без решітки, в іншому вони повинні збігатися.

Розміщуємо чотири тега
, Які визначають інтерактивні області в зображенні-карті:
- першою ми задаємо прямокутну область (Атрибут shape зі значенням "rect"), вона відповідає нашому першого зображенню ( перші два значення відповідають верхньому лівому кутку, такі два значення визначають правий верхній і нижній кут).
- другий вказуємо круглу область (Атрибут shape зі значенням "circle"), вона відповідає нашому другого зображенню ( перший значеннявідповідає координатам по осі x, А друге за осі y, Третій визначає радіус).
- Що стосується третин і четвертої фігури, То вони складені за принципом багатокутної області (Атрибут shape зі значенням "poly"). Ви визначаєте необхідну кількість точок на зображенні, вираховує координати цих точок (графічний редактор) і вказуєте в такому порядку, щоб браузер їх міг з'єднати однією лінією. На прикладі трикутника (третій рисунок): перша точка (координати x і y вершини), друга точка (координати x і y лівого нижнього кута) і третя точка (координати x і y правого нижнього кута).

Звертаю Вашу увагу на те, що якщо у тега Практичне завдання № 26.

нюанс: Для чистоти практичного завдання пропоную в якості першої точки використовувати вершину зірки та рухатися за годинниковою стрілкою. Як значення атрибута href я вказав # в цьому випадку вона виступає як заглушка (ви залишаєтеся на тій же сторінці), ви можете зробити перехід на будь-яку сторінку.

Підказка: Щоб отримати координати зображення скористайтеся редактором зображень, навіть найпростіший редактор, наприклад, Paint, Отображет координати курсору. Випишіть координати на листок або в окремий файл і внесіть значення на сторінку.

Якщо у Вас виникнуть труднощі з виконанням завдання, то проінспектуйте код сторінки, відкривши приклад в окремому вікні та уважно його вивчіть.

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

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

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

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

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

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

XHTML

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

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

Головний параметр у тега img в даному випадку - це usemap \u003d "# img-nav". Він вказує на карту з яким ім'ям ми будемо посилатися.

XHTML

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

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

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

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

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

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

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

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

якщо shape \u003d "poly", То вказуються координати кожної вершини багатокутника. shape \u003d "poly" coords \u003d «80,100,150,100,210,40,300,40,300,110" в даному випадку координати першої вершини будуть 80,100, другий 150,100, третій - 210,40, четвертої - 300,40, п'ятої - 300,110.

якщо shape \u003d "circle", То вказуємо координати центру і радіус. shape \u003d "circle" coords \u003d "300,300,100" тут координати центру 300,300 і радіус 100.

title \u003d "(! LANG: Andrey" alt="Andrey" !} вже знайомі параметри. Зупинятися на них не буду.

Повний код представлений нижче:

XHTML

Вітаю, друзі. У цьому відео ми продовжимо розмову про карти зображень в HTML. Але спершу згадаємо, про що ми говорили в минулому відео. Справа в тому, що ці відео досить тісно пов'язані між собою, і щоб зрозуміти, про що мова необхідне подивитися попередні відео з розділу зображень.

У минулому відео уроці ми якраз почали знайомство з картами зображень в HTML. Подивилися, як вона повинна виглядати в остаточному підсумку, правда, із застосуванням скриптів. Трохи поговорили про координатах. Тобто про те, як ми їх будемо визначати. Як Ви можете пам'ятати, я зупинив свій вибір на одному із способів, це спосіб з використанням атрибута ismap, так як, на мій погляд, саме цей спосіб визначення координат є найпростішим і менш складним, а значить саме він нам підходить.

У підсумку в минулому відео ми зробили картинку-посилання. Ну а потім з зображення зробили серверну картку зображення, яка допоможе нам у визначенні координат активних областей.

Тепер настав час приступити до безпосереднього створення карти зображення в HTML. У цьому відео ми охопимо досить велика кількість інформації, починаючи з теорії і переходячи до практики.

Почнемо з вивчення ще двох HTML-тегів, це теги і . Саме ці теги призначені для створення карти зображення в HTML-документі.

HTML-тег map.

тег створює якийсь контейнер, в якому будуть вказані активні області. При додаванні тега в HTML-документ ми не побачимо будь-яких змін на сторінці, так як цей тег Не додає будь-яку інформацію. Він просто створює контейнер, який буде позначати початок карти зображення і її завершення.

Даний тег має обов'язковий атрибут name. В якому ми повинні вказати ім'я нашої карти зображення. Крім того варто зазначити що цей тег не є блоковим елементом, а значить необхідно його прописувати всередині блокового елемента, наприклад тега абзацу або універсального тега div.

HTML-тег area.

тег відповідає за вказівку активних областей всередині контейнера . Саме цей HTML-тег визначає активну область всередині зображення, вказує яку фігуру ми, при цьому використовуємо, вказує опис, за допомогою обов'язкового атрибуту alt, і найголовніше, з допомогою атрибута coords для тега ми можемо вказати координати активних областей карти зображення.

Тут також хочу згадати про те, про що забув сказати в відео уроці, що цей тег легко замінюється тегом для вказівки гіперпосилань в HTML-документі. Тобто тегом . Якщо Ви пам'ятаєте, то саме у тега є точно такі ж атрибути shape і coords, які призначені саме для вказівки базової фігури і її координат.

Визначення координат квадрата, прямокутника, кола і багатокутника.

Також в цьому відео уроці ми дуже детально розберемо, як правильно визначати координати для тієї чи іншої фігури. Скільки має бути координат для певної фігури. Це пов'язано з тим, що для кожної базової фігури є свій набір координат і порядок їх отримання.

Спочатку ми детально розглянемо в теорії як визначити координати для квадрата, потім для окружності і нарешті, для багатокутника.

Після чого на живому прикладі ми визначимо координати квадрата і прямокутника. Потім визначимо координати кола. І нарешті, вкажемо координати трикутника, який свою чергу грає роль багатокутника.

Загалом, це відео стане дуже корисним посібником для тих, кому стала цікава тема створення карт зображень в HTML.

Відео урок: Створення карти избражение в HTML.

HTML-довідник і інші матеріали можна і потрібно завантажити!

У наступному відео уроці ми остаточно вивчимо тему створення карт зображень, поговоримо про останній атрибуті тега usemap, який допоможе нам зв'язати картинку з картою зображення. І розглянемо ще парочку живих прикладів карт зображень на різних картинках.