Синтаксис
<map name="...">
<area shape="..." coords="..." href="..." alt="...">
</map>
<img src="..." usemap="...">
Описание
Тег <map> (от англ. map — карта) используется для определения клиентской карты изображения.
Цель использования тега <map> — в связывании атрибута usemap и тега <img> с атрибутом name тега <map> для создания связи между изображением и картой.
Внимание!
Тег <area> всегда должен быть вложен в контейнер <map>.
Атрибуты, которые можно использовать в теге <map>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.
Атрибуты
| Атрибут | Значение | Описание |
| name | имя карты |
Задаёт карте имя, чтобы на неё можно было ссылаться. Обязательный атрибут |
Пример
HTML-код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Тег map</title>
</head>
<body>
<img src="figures.png" usemap="#figures">
<map name="figures">
<area shape="rect" coords="25,25,125,125" href="https://ru.wikipedia.org/wiki/Квадрат" target="_blank" alt="красный квадрат">
<area shape="circle" coords="200,75,50" href="https://ru.wikipedia.org/wiki/Круг" target="_blank" alt="зеленый круг">
<area shape="poly" coords="325,25,262,125,388,125" href="https://ru.wikipedia.org/wiki/Треугольник" target="_blank" alt=" синий треугольник">
<area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="https://ru.wikipedia.org/wiki/Звезда_(геометрия)" target="_blank" alt="желтая звезда">
</map>
</body>
</html>
Отображение в браузере:
Параметры CSS по умолчанию
map {
display: inline;
}
Поддержка браузера
|
Элемент |
Chrome |
Opera |
Firefox |
Safari |
Microsoft Edge |
| <map> | Да | Да | Да | Да | Да |
Продолжаем добавлять языки программирования для Вас.
Впереди много интересного!
Только свежие новости программирования и технологий каждый день.
Комментарии