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

Описание

Атрибут usemap связывает элемент <object> с клиентским изображением-картой (<map>), определяя интерактивные области на встроенном изображении. Это позволяет:

  • Создавать кликабельные области на изображениях
  • Реализовывать сложные навигационные схемы
  • Добавлять интерактивность к встроенным изображениям
Пример использования:
<object data="world-map.svg" type="image/svg+xml" usemap="#worldmap"> <map name="worldmap"> <area shape="rect" coords="100,50,200,150" href="europe.html" alt="Europe"> <area shape="circle" coords="300,200,50" href="asia.html" alt="Asia"> </map> </object>

Синтаксис и значения:

Значение Описание Формат
Имя карты Ссылка на элемент <map> usemap="#mapname"

Пример с SVG и сложными областями:

<object data="interactive-diagram.svg" type="image/svg+xml" usemap="#diagrammap"> <map name="diagrammap"> <area shape="poly" coords="100,200,150,250,200,200" href="part1.html" alt="Part 1"> <area shape="poly" coords="250,200,300,250,350,200" href="part2.html" alt="Part 2"> </map> </object>

Рекомендации по использованию:

  • Для растровых изображений используйте с <img> вместо <object>
  • Сочетайте с SVG для создания сложных интерактивных карт
  • Всегда указывайте атрибут alt для областей
  • Проверяйте координаты в различных размерах экрана
  • Для адаптивных решений рассмотрите использование JavaScript

Ограничения и совместимость:

  • Полностью поддерживается для SVG в современных браузерах
  • Для растровых изображений лучше подходит <img usemap>
  • Координаты должны точно соответствовать изображению
  • Не адаптируется автоматически к изменениям размера

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