Атрибут usemap элемента HTML <img>

HTML тег <img>

Определение и использование

usemap Атрибут определяет изображение как клиентскую карту изображений.

Изображение с интерактивной областью - это изображение с областью, на которую можно нажать.

usemap Атрибуты связаны с Элемент <map> Связанным с атрибутом name или id, чтобы установить связь между <img> и <map>.

Внимание:Если элемент <img> является потомком элемента <a> или <button>, то его нельзя использовать usemap Свойства.

Дополнительное чтение: Подробное объяснение атрибута usemap

Пример

Изображение с интерактивной областью:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computer" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Phone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Cup of coffee" href="coffee.html">
</map>

Попробуйте сами

Синтаксис

<img usemap="#mapname">

Значение атрибута

Значение Описание
#mapname Знак номера (#) вместе с именем используемого элемента <map>.

Дополнительное чтение: Подробное объяснение атрибута usemap

usemap Атрибут предоставляет механизм «клиентской» карты изображений, эффективно устраняющий обработку сервером координат мыши и связанные с этим проблемы с задержкой в сети. Через особые теги <map> и <area> HTML-автор может предоставить описание карты изображений usemap, которая включает координаты чувствительных к ссылкам областей и соответствующие URL ссылок. Значением атрибута usemap является URL, указывающий на специальную область <map>. Браузер на компьютере пользователя преобразует координаты щелчка мыши на изображении в определенное поведение, включая загрузку и отображение другого документа.

Мы приведем пример. Напомним, что следующее исходное кодирование отображает изображение map.gif размером 100x100 пикселей на 4 области, и при нажатии на одну из них пользователь будет перенаправлен на различные документы. Обратите внимание, что в этом теге <img> мы эффективно включили обработку ismap для изображений-карт, чтобы пользователи, использующие браузеры без функции usemap, могли обрабатывать изображения-карты через другое средство, то есть через серверный механизм:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

Различия в применении атрибутов ismap и usemap

Карта - отличный пример использования атрибутов ismap и usemap, например, при просмотре веб-страниц крупной национальной компании, пользователь может щелкнуть на городе, чтобы получить адреса и телефонные номера местных розничных магазинов и т.д.

Преимущества использования клиентской обработки картинок в атрибуте usemap, в отличие от механизма ismap, заключается в том, что он может использоваться в средах без Интернета (off-line), например, при использовании локальных файлов или CD-ROM.

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка

HTML тег <img>