Html зображення-карта
Іноді згідно дизайнерським задумом web-майстри в HTML-документ треба помістити зображення, окремі частини якого повинні переводити за гіперпосиланням на різні цільові документи. Один з очевидних прикладів такого зображення - географічна карта, клацнувши мишкою по певних зонах якої, ми переходимо до відповідних документів. В цьому випадку організувати посилання з використанням елемента a безпосередньо не можна, і доводиться або "розрізати" зображення на кілька окремих, зістикувати їх і діяти звичайним чином (див. Розділ Гіперпосилання), або використовувати елемент map. задає навігаційну карту, засновану на зображенні.
У елемента-контейнера map єдиним обов'язковим артібутом є його ім'я name. яке повинно бути використане при описі атрибута usemap елемента img. описує зображення, покликаного служити картою (див. приклад, наведений нижче). Всередині контейнера map кожної чутливої до переміщення миші зоні зображення повинен відповідати елемент area з атрибутами:
Список через кому координат активної зони (залежить від типу заданої форми зони)
Можливі значення:
circle (окружність - задається координатами центру та радіусом в пікселах)
rectangle (прямокутник - задається координатами лівого верхнього і правого нижнього кута)
polygon (багатокутник - задається координатами своїх вершин)
Іноді буває потрібно вказати, що дана зона (задана атрибутом SHAPE і координатами COORDS) не є активною, реакції на клацання миші немає
Альтернативний текст; "Спливає" при наведенні курсору миші на дану зону зображення
id, style, class, title, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, dir, lang
необов'язкові атрибути, описані в розділі "Концепції HTML 4+".
Нехай, наприклад, у нас є зображення russia.gif розміру 360х196 пікселів і три HTML-документа, на які треба організувати гіперпосилання. peterburg.htm, moscow.htm і yakutsk.htm.
Активними зонами зображення хочеться зробити гуртки, умовно відзначають місце розташування на карті трьох міст.
Центри гуртків, якщо взяти за точку відліку (0,0) лівий верхній кут зображення, знаходяться приблизно на рівні
(48,84) - Київ
(49,60) - Харків
(256,93) - Жовті Води.
Логічно в даному випадку вибрати окружність як форми активної зони. Прийнявши, наприклад, радіус цієї окружності рівним 9 пикселам (з надлишком), реалізувати гіперпосилання можна за допомогою наступного HTML-коду:
Вивчивши HTML-код, перевірте, як працює карта-зображення в нашому прикладі. Щоб було зручніше, цільові документи виводяться в нових маленьких вікнах.