Перейти к содержимому

HTML-тег <map>

Тег <map> задаёт карту изображения с кликабельными областями. Области определяются вложенными тегами <area> внутри <map>.

Связь между <img> и картой клиентской стороны: у <map> задаётся обязательный атрибут name, у изображения — usemap с тем же именем.

Синтаксис

Тег парный: содержимое между <map> и </map>.

Пример тега HTML <map>:

HTML-тег <map>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo items to watch it closer:</p>
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/0f94cf189afcdc39c4df2a73d230d1a7425ee66d.png"  width="145" height="126" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="45,58,30" alt="html-book" href="https://www.w3docs.com/learn-html.html" />
      <area shape="circle" coords="88,64,15" alt="html-quiz" href="https://www.w3docs.com/quiz-start/html-basic" />
      <area shape="circle" coords="114,67,14" alt="html-snippets" href="https://www.w3docs.com/snippets/html.html" />
    </map>
  </body>
</html>

Атрибуты

АтрибутЗначениеОписание
namemapnameИмя карты изображения.

Также действуют глобальные атрибуты.

Practice

Что верно про HTML-тег <map>?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.