Атрибут usemap HTML тега <img>
HTML тег <img>Значение и применение
Атрибут usemap (HTML тега <img>) ссылается на элемент <map> (обязательный атрибут name элемента), который содержит координаты для клиентской части карты-изображения.
Атрибут usemap нельзя использовать, если элемент <img> является потомком элементов <a>, или <button>.
Поддержка браузерами
| Атрибут |  Chrome |  Firefox |  Opera |  Safari |  IExplorer |  Edge |
|---|---|---|---|---|---|---|
| name | Да | Да | Да | Да | Да | Да |
Синтаксис:
<map name = "#mapname">
Значения атрибута
| Значение | Описание |
|---|---|
| #mapname | Ссылается на элемент <map> (обязательный атрибут name элемента), который содержит координаты для клиентской части карты-изображения. |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута usemap HTML тега <img></title> </head> <body> <img src = "star.png" usemap = "#zvezda" alt = "Пятиконечная звезда"> <!-- размещаем изображение, которое мы в последствии будем использовать при составлении изображении-карты --> <map name = "zvezda" > <!-- задаём имя карте-изображению --> <area shape = "poly" coords = "251,33, 273,101, 344,101, 286,143, 309,210, 251,170, 192,213, 215,143, 158,101, 229,101" href = "#" alt = "Пятиконечная звезда"> <!-- определяем необходимое количество точек на изображении (многоугольную интерактивную область) --> </map> </body> </html>
И так по порядку, что мы сделали в этом примере:
- Разместили изображение (тег <img>), которое мы в последствии будем использовать при составлении изображении-карты. В атрибуте usemap необходимо обязательно указать имя изображения-карты, которое мы будем использовать в элементе <map> (необходимо обязательно перед именем указать решетку).
- Размещаем изображение-карту (тег <map>) и задаем единственный и обязательный атрибут элемента name (имя карты). Обратите внимание, что в отличие от тега <img> мы задаем имя без решетки, в остальном они должны совпадать.
- С использованием тега <area>, мы определяем многоугольную интерактивную область (атрибут shape со значением "poly") в изображении-карте.
Результат нашего примера:
