Тег area
Тег area (с англ. область) применяется внутри контейнера <map> для создания карты-изображения. Определяет параметры активных зон-ссылок на карте.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<area href="URL" alt="..."/>
Атрибуты
| accesskey | горячая клавиша (+Alt) для элемента |
|---|---|
| alt | альтернативный текст. Выводится в виде всплывающей подсказки. Также отображается, если картинки отключены |
| class | определяет имя используемого класса |
| coords | координаты фигуры, задающие ссылку
|
| disabled | флаг. Делает элемент недоступным. Отсутствует в спецификации HTML 4.01! |
| href | задает адрес документа (объекта), на который следует перейти |
| id | уникальный индетификатор |
| name | уникальное имя элемента. Отсутствует в спецификации HTML 4.01! |
| nohref | задает неактивную область |
| onblur | потеря фокуса элементом |
| onclick | щелчек на элементе |
| ondblclick | двойной щелчек на элементе |
| onfocus | получение фокуса элементом |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| shape | тип геометрической фигуры
|
| style | задает встроенную таблицу стилей |
| target | имя окна или фрейма, где будет открыт документ, который указан в href. В качестве аргумента используется имя окна или фрейма. Зарезервированные имена:
|
| tabindex | порядок обхода элементов с помощью Tab |
| title | добавляет всплывающую подсказку |
Пример
код:
<map name="myMap" id="myMap">
<area nohref="nohref" alt="тут ссылки нет" title="тут ссылки нет" shape="circle" coords="70,138,39"/>
<area href="#" alt="Серая зона" title="Серая зона" shape="rect" coords="20,10,118,188"/>
<area href="#" alt="Желтая зона" title="Желтая зона" shape="poly" coords="175,30,270,100,200,150"/>
</map>
<img src="map.png" width="300" height="200" alt="карта" usemap="#myMap"/>Рекомендации по использованию
- должен быть закрыт слешем (<area…/>)
- должен располагается только внутри контейнера <map>
- атрибут alt обязателен
Тег map определяет клиентскую карту (или другой механизм навигации), который может быть ассоциирован с другими элементами (<img>, <object>, <input>). Карта ассоциируется с элементом с помощью атрибута usemap. Тег map может использоваться без ассоциированного изображения для механизмов общей навигации.
Внутри контейнера map можно комбинировать:
- Один или более элементов area. Эти элементы не имеют содержимого, но определяют геометрические регионы карты изображений и гиперссылки, ассоциированные с каждым регионом.
- Содержимое уровня блока. Это содержимое должно включать <теги a>, которые специфицируют геометрические регионы карты и ссылки, ассоциированные с каждым регионом.
Если map имеет смешанное содержимое (и теги area, и блочные элементы), браузеры, согласно спецификации HTML 4.01, должны игнорировать элементы area.
Если регионы перекрываются, элемент, определяющий регион, который появился раньше в документе, имеет приоритет.
Рекомендуется предоставлять текстовую альтернативу графической карте для тех случаев, когда графика недоступна или пользователь не может её получить. Альтернативный текст добавляет значения страницы в глазах поисковых систем.
Некотрые голосовые браузеры не поддерживают клиентские карты изображений, поэтому не стоит карты использовать в качестве основной навигации.
При использовании фигуры poly хорошей практикой считается указывать последние координаты, равные первым, для логического заверщения фигуры.
Твой код:
Результат:
большой полигон