Атрибут usemap тега <input>

Описание

Атрибут usemap связывает элемент <input type="image"> с клиентской картой изображений (<map>), позволяя создавать интерактивные области на графической кнопке. При клике на разные области изображения будут отправляться разные координаты.

Пример использования:
<!-- Графическая кнопка с картой областей --> <input type="image" src="control-panel.png" alt="Панель управления" usemap="#controlmap"> <map name="controlmap"> <area shape="rect" coords="0,0,50,50" href="#play" alt="Play"> <area shape="rect" coords="50,0,100,50" href="#pause" alt="Pause"> <area shape="circle" coords="150,25,25" href="#stop" alt="Stop"> </map>

Основные аспекты:

Атрибут Описание Пример
usemap Ссылка на карту изображений (с #) usemap="#mapname"
name (в <map>) Идентификатор карты <map name="mapname">
shape Форма области (rect, circle, poly) shape="circle"
coords Координаты области coords="x,y,radius"

Пример с обработкой координат:

<form action="/process" method="post"> <input type="image" src="color-picker.png" alt="Выбор цвета" usemap="#colormap" name="picker"> <map name="colormap"> <area shape="rect" coords="0,0,100,100" alt="Красный"> <area shape="rect" coords="100,0,200,100" alt="Зеленый"> <area shape="rect" coords="200,0,300,100" alt="Синий"> </map> </form> <!-- На сервер отправятся координаты клика: picker.x и picker.y -->

Рекомендации:

  • Всегда указывайте альтернативный текст (alt) для областей
  • Используйте инструменты для точного определения координат
  • Для сложных форм лучше использовать SVG
  • Проверяйте работу на мобильных устройствах
  • Сочетайте с CSS для визуальной обратной связи

Пример с CSS-эффектами:

<style> .imagemap-area:hover { outline: 2px solid rgba(255,255,0,0.5); } </style> <input type="image" src="world-map.png" usemap="#worldmap"> <map name="worldmap"> <area class="imagemap-area" shape="poly" coords="..." href="#europe" alt="Европа"> <area class="imagemap-area" shape="poly" coords="..." href="#asia" alt="Азия"> </map>

Ограничения:

  • Устаревшая технология, заменяемая SVG
  • Точки координат должны обновляться при изменении размера изображения
  • Ограниченная поддержка сложных форм
  • Плохая доступность для скринридеров

Альтернатива с SVG:

<svg viewBox="0 0 300 100"> <a href="#play"> <rect x="0" y="0" width="50" height="50" fill="red"/> <text x="25" y="30" text-anchor="middle" fill="white">Play</text> </a> <a href="#stop"> <circle cx="150" cy="25" r="25" fill="green"/> </a> </svg>

Примечание: Хотя технология клиентских карт изображений с атрибутом usemap всё ещё поддерживается, для создания интерактивных изображений в современных веб-приложениях рекомендуется использовать SVG, который предоставляет больше возможностей и лучше масштабируется.