Атрибут href тега <area>
Описание
Атрибут href для тега <area> определяет URL-адрес, на который ведет кликабельная область изображения-карты (image map). Это основной атрибут, делающий области интерактивными.
<img src="navigation.png" usemap="#navmap" alt="Навигационное меню">
<map name="navmap">
<area shape="rect" coords="0,0,100,50" href="/home" alt="Главная">
<area shape="circle" coords="150,75,25" href="/search" alt="Поиск">
<area shape="poly" coords="200,0,250,50,200,100" href="/contact" alt="Контакты">
</map>
Особенности работы:
| Характеристика | Поведение |
|---|---|
| Обязательность | Обязателен для кликабельных областей |
| Типы URL | Абсолютные, относительные, якоря, mailto:, tel: |
| Поведение | Аналогично ссылкам <a> |
| Без href | Область становится нефункциональной |
| JavaScript | Поддерживает javascript:void(0) и обработчики |
Рекомендации по использованию:
- Всегда указывайте для кликабельных областей
- Сочетайте с атрибутом alt для доступности
- Для сложных действий используйте JavaScript
- Избегайте вложенных image maps
- Проверяйте работоспособность на touch-устройствах
Примеры различных URL:
<map name="examples">
<area shape="rect" coords="0,0,100,50" href="#section1" alt="Якорь">
<area shape="rect" coords="100,0,200,50" href="tel:+123456789" alt="Позвонить">
<area shape="rect" coords="200,0,300,50" href="javascript:showModal()" alt="Модальное окно">
</map>
JavaScript взаимодействие:
<map name="interactive">
<area shape="rect" coords="0,0,100,100"
href="#"
onclick="handleClick(event, 'option1')"
alt="Интерактивная область">
</map>
<script>
function handleClick(e, option) {
e.preventDefault();
console.log('Выбрано:', option);
}
</script>
Ограничения и лучшие практики:
- Избегайте сложных image maps для основной навигации
- Для адаптивных сайтов предусмотрите альтернативы
- Проверяйте размеры hitbox на мобильных устройствах
- Учитывайте SEO-ограничения image maps
Примечание: Хотя технология image maps устаревает для сложных интерфейсов, она остается полезной для простых интерактивных изображений при правильном использовании атрибутов href и alt.