Карта зображень

Карта зображень (англ. image map, іноді сенсорна карта або графічна карта) — це графічний об'єкт мови розмітки HTML, пов'язаний із зображенням та містить спеціальні області (активні зони), при натисканні яких відбувається перехід за певним гіперпосиланням (javascript дозволяє встановлювати й інші дії). Використання карт зображень дозволяє зберігати кілька посилань в одному зображенні.

Використання

Для додавання карти зображень на web-сторінку використовується парний HTML-теґ <MAP>, в атрибуті "name" якого вказується унікальний в межах документа ідентифікатор карти. Всередину нього додаються непарні теґи <AREA>, кожен з яких описує одну активну зону. Потім до теґу <IMG>, що необхідно пов'язати з картою, додається атрибут usemap , в якому міститься ім'я прив'язаної карти. Значення атрибута повинно починатися зі знака решітки (#). При цьому в тезі <IMG> повинні бути явно вказані розміри зображення.

Параметри (атрибути) теґа

Контейнер <MAP>
  • name - ідентифікатор карти зображень, унікальний в межах документа. У XHTML атрибут name вважається застарілим, і замість нього пропонується використовувати атрибут id.

Елемент <AREA>
  • shape - форма активної області. Допустимі значення: circle (окружність), rect (прямокутник), poly (полігон).
  • alt - альтернативний текст області. Служить лише коментарем для посилання, оскільки на екран не виводиться.
  • coords - координати активної області. Відлічуються в пікселях від лівого верхнього кута зображення, якому відповідає значення "0,0". Перше число є координатою по горизонталі, друге - по вертикалі. Список координат залежить від форми області:
    • Для кола задаються координати центру кола і радіус: < AREA COORDS = "x, y, r"
    • Для прямокутника - координати лівого верхнього і правого нижнього кута: < AREA COORDS = "x1, y1, x2, y2"
    • Для полігону задаються координати його вершин: < AREA COORDS = "x1, y1, x2, y2,..., xN, yN" >

При цьому перша і остання точки полігону автоматично замикаються в лінію.

  • href - Визначає адресу посилання для області. Правила запису такі ж, як і для тегу <А>.

Переваги та недоліки

Переваги:

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

Недоліки:

  • Неможливо встановити альтернативний текст для окремих областей. Він би дозволив отримувати текстову інформацію про зображення якщо браузер його не завантажив.
  • При складній формі області посилання збільшується об'єм коду HTML. Контур складається з набору прямих відрізків, для кожної точки якого необхідно задати дві координати. Загалом кількість таких точок може бути занадто великою.
  • З картами зображень неможливо здійснити деякі ефекти, що доступні при розрізі одного з малюнків на фрагменти.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.