Карты изображения
В общем виде карты-изображения представляют области одного изображения, описанные в файле. Каждая область характеризуется её формой, что определяет способ её задания и координаты опорных точек. Также область содержит адрес документа на который она ссылается.
- Существует два способа задать карту-изображение:
- Внутри HTML-кода документа. Такой способ носит название клиентского, так как обрабатывется непосредственно браузером на стороне клиента.
- В виде отдельного файла, который хранится на сервере и обрабатывается CGI-программой сервера. Поэтому такой способ реализации называтеся серверным.
Допускается комбинировать оба способа для реализации лучшего результата и независимости от конфигураций сервера и браузера.
Для клиентского способа используется параметр в тэге <img> usemap="#map_name". Хорошим тоном считается сразу за таким изображением размещать карту, парный тэг <map>, имеющего параметр name="map_name". Внутри конструкции map размещаются тэги <area> с соответствующими параметрами, формой области и координатами опорных точек.
| Параметр | Значение | Назначение |
|---|---|---|
| usemap | "#map_name" | Однозначно идентифицирует изображение для тэга <img> для карты |
| name | "map_name" | Устанавливает связь карты <map> с изображением |
| shape | circle | Окружность, задаётся координатами центра и радиусом. |
| rect | Прямоугольник, задаётся координатами верхнего левого угла и нижнего правого угла | |
| poly | Многоугольник, задаётся координатами вершин. Последняя точка автоматически будет соединена с первой. | |
| default | Область остального изображения по умолчанию, так же может быть связана с ссылкой. Но только в серверной реализации! | |
| point | Отдельная точка изображения. Обычно не используется так, как в конкретную точку не всегда легко указать мышью. |
В качестве примера рассмотрим фрагмент предыдущей страницы.
<img src="../../images/fruits.png" usemap="#fruits">
<map name="fruits">
<area shape="circle" coords="91,376,24" href="sample_5.html" alt="вишня">
<area shape="circle" coords="217,406,26" href="sample_9.html" alt="ежевика">
<area shape="circle" coords="258,429,14" href="sample_10.html" alt="черника">...
</map>
В серверном варианте описание карты хранится в соответствующем файле с расширением .map, при этом изображение на него должно ссылаться используя механизм ссылки <a>. В тэге <img> тогда (обычно а в конце) указывается ключевое слово ismap.
Рассмотрим пример.
<a href="fruits.map"><img src="../../images/fruits.png" ismap></a> Содержимое файла "fruits.map": circ (91,376) 24 sample_5.html circ (217,406) 26 sample_9.html circ (258,429) 14 sample_10.html circ (285,424) 13 sample_11.html circ (341,331) 90 sample_21.html circ (275,198) 71 sample_12.html poly (218,10) (192,36) (201,67) (203,92) (201,104) (188,130) (185,146) (185,166) (195,197) (207,218) (341,230) (399,246) (436,245) (459,243) (488,252) (515,225) (519,215) (534,202) (542,182) (525,161) (502,152) (454,157) (426,152) (379,135) (326,99) (283,64) (244,30) (226,18) sample_7.html circ (516,153) 61 sample_13.html circ (401,103) 66 sample_14.html ...
Данный файл представлен в фрмате CERN, так же существует реализация NCSA одинаковая по содержанию, но немного отличающаяся по структуре предоставления данных. Основным отличием является то, что окружность представлена координатами центра и точки, лежащей на этой окружности. Фрагмент файла .map тогда имел бы вид:
... circ sample_21.html 341,331 341,421 circ 71 sample_12.html 275,198 365,198 poly sample_7.html 218,10 192,36 201,67 203,92 201,104 188,130 185,146 185,166 195,197 207,218 341,230 399,246 436,245 459,243 488,252 515,225 519,215 534,202 542,182 525,161 502,152 454,157 426,152 379,135 326,99 283,64 244,30 226,18 circ sample_13.html 516,153 61 577,153 ...