Атрибут media тега <area>
Описание
Атрибут media для тега <area> определяет тип устройства или медиа-характеристики, для которых предназначена данная область изображения-карты. Этот атрибут работает аналогично media-запросам в CSS.
<img src="responsive-nav.png" usemap="#mediamap" alt="Адаптивное меню">
<map name="mediamap">
<area shape="rect" coords="0,0,100,50"
href="/full-menu"
media="screen and (min-width: 1024px)"
alt="Полное меню">
<area shape="circle" coords="150,25,25"
href="/mobile-menu"
media="screen and (max-width: 1023px)"
alt="Мобильное меню">
</map>
Особенности работы:
| Характеристика | Поведение |
|---|---|
| Формат значения | Стандартные медиа-запросы (аналоги CSS) |
| Поддержка | Ограниченная в браузерах |
| Альтернатива | CSS-медиазапросы + JavaScript |
| Применение | Активирует область только на указанных устройствах |
Рекомендации по использованию:
- Используйте для адаптивных image maps
- Проверяйте поддержку в целевых браузерах
- Всегда предусматривайте fallback-решение
- Сочетайте с обычными медиазапросами в CSS
- Для сложных случаев используйте JavaScript
Современная альтернатива с JavaScript:
<script>
function updateAreas() {
const areas = document.querySelectorAll('area[media]');
areas.forEach(area => {
const mq = window.matchMedia(area.getAttribute('media'));
area.style.pointerEvents = mq.matches ? 'auto' : 'none';
});
}
window.addEventListener('resize', updateAreas);
updateAreas();
</script>
Пример медиа-запросов:
<map name="devicemap">
<area media="print" href="/print-version" alt="Версия для печати">
<area media="(orientation: portrait)" href="/portrait" alt="Портретный режим">
<area media="(prefers-color-scheme: dark)" href="/dark-mode" alt="Темная тема">
</map>
Ограничения и лучшие практики:
- Ненадежная кросс-браузерная поддержка
- Не заменяет полноценную адаптивную верстку
- Для критически важной навигации используйте другие подходы
- Тестируйте на реальных устройствах
Примечание: Хотя атрибут media является частью спецификации HTML5, на практике его использование с тегом <area> ограничено. Для сложных адаптивных решений рекомендуется использовать CSS и JavaScript.