Пример:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>
Определение и использование
Тег <area> определяет участки на карте-картинке (и делает эти участки выделяемыми и кликабельными). Тег <area> всегда вложен в тег <map>.
Заметка: мы определяем картинку в теге <img> и связываем ее с тегом <map>, с помощью свойства usemap="" в котором указываем имя карты, которое в свою очередь описывается в теге <map> в свойстве name="".
Совместимость с браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <area> | Да | Да | Да | Да | Да |
Атрибуты
= New in HTML5.
| Attribute | Value | Description |
|---|---|---|
| alt | text | Определяет альтернативный текст для карты. Является обязательным если есть значение в атрибуте |
| coords | coordinates | Определяет координаты для тега area, чтобы задать площадь |
| download | filename | Определяет путь к файлу для скачивания при клике на карте |
| href | URL | Определяет ссылку для перехода по клику на area |
| hreflang | language_code | Определяет язык |
| media | media query | Определяет для какого устройства сделана карта |
| nohref | value | Не поддерживается в HTML5. Определяет что area не имеет ссылки |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Определяет связь между текущим документом и с тем на который идет ссылка |
| shape | default rect circle poly |
Определяет начертания area |
| target | _blank _parent _self _top framename |
Определяет как будет открываться страница при переходе по area ссылке |
| type | media_type | Определяет для какого устройства сделана страница на которую ведет area |
Глобальные атрибуты:
Глобальные атрибуты
Атрибуты событий:
Атрибуты событий
Добавить комментарий