Вспоминаем Image Map

Сейчас олды содрогнутся. Забытая техника древних.

В прошлом довольно часто можно было встретить сайт, где ссылки были не квадратные, а произвольной формы. Причём поверх картинок. При этом кликабельные, доступные, вычурные.

<img src="map.png"
     alt="My awesome map"
     usemap="#map">
<map id="map" name="map">
  <area shape="rect"
        coords="176,14,323,58"
        href="belarus.html"
        alt="Belarus">
  <area shape="poly"
        coords="260,96,209,249,130,138"
        href="belgium.html"
        alt="Belgium">
</map>

Ссылки-картинки с правильным альтернативным текстом, разбитые на области.

Как вы понимаете, были нюансы. Эта штука была абсолютно не готова к адаптивности интерфейсов. И ховеры по ней стилизовать было нельзя. Но выглядело классно. Да и до сих пор выглядит, вы всё ещё можете ими пользоваться.

Энди Кларк собрал альтернативу на SVG и JS, которая лишена минусов оригинальных Image Map. Есть и адаптив, и кликабельность, и стилизация по ховеру.

https://css-tricks.com/revisiting-image-maps/