Атрибут coords тега <area>
Описание
Атрибут coords для тега <area> определяет координаты активной области на изображении-карте (image map). Координаты задаются в пикселях относительно левого верхнего угла изображения.
<img src="planets.png" usemap="#planetmap" alt="Солнечная система">
<map name="planetmap">
<area shape="circle" coords="120,120,50" href="earth.html" alt="Земля">
<area shape="rect" coords="200,80,280,160" href="mars.html" alt="Марс">
<area shape="poly" coords="350,100,400,150,350,200,300,150" href="jupiter.html" alt="Юпитер">
</map>
Особенности работы:
| Форма области | Формат координат | Пример |
|---|---|---|
| rect (прямоугольник) | x1,y1,x2,y2 | coords="0,0,100,50" |
| circle (круг) | x,y,радиус | coords="150,150,30" |
| poly (многоугольник) | x1,y1,x2,y2,...,xn,yn | coords="20,30,40,50,30,90" |
| default (вся область) | Не требует координат | Не используется coords |
Рекомендации по использованию:
- Используйте графические редакторы для точного определения координат
- Проверяйте области в разных браузерах
- Для сложных форм используйте полигоны (poly)
- Учитывайте изменение размеров изображения (responsive)
- Сохраняйте оригинальные размеры изображения
Инструменты для работы:
<!-- Онлайн-генератор координат -->
<!-- https://www.image-map.net/ -->
<!-- или -->
<!-- Используйте Photoshop/Figma для определения координат -->
Адаптивные image maps:
<script src="imageMapResizer.min.js"></script>
<script>
imageMapResize(); // Автоматически масштабирует координаты
</script>
Важные замечания:
- Координаты чувствительны к изменению размеров изображения
- Для адаптивных сайтов рассмотрите альтернативные решения
- Проверяйте кликабельные области на разных устройствах
- Избегайте сложных image maps для критической навигации
Примечание: Хотя технология image maps устаревает для сложных интерфейсов, она остается полезной для простых случаев интерактивных изображений.