Как сделать каждый раздел изображения кликабельным

-1

Мне нужно сделать каждый раздел на этом изображении отдельной ссылкой. Если я сделаю каждый раздел изображением и наложил его, это означает, что на прозрачном фоне есть некоторое совпадение.Как сделать каждый раздел изображения кликабельным

Есть ли способ сделать это, используя SVG или карты областей?

источник

2015-05-06 zizther

http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG – isherwood

должны быть в состоянии сделать это, создавая прозрачную svg над областью и добавляя событие click к этому svg. – honerlawd

Вы можете использовать тег <map>, совместимый с HTML4 и HTML5.

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

Вам необходимо определить карту, как это:

<img src="menu.gif" alt="roundMenu" usemap="#roundMenu"> 

<map id="roundMenu" name="roundMenu"> 
    <area shape="poly" alt="" title="" coords="200,584,360,412,692,204,980,128,1176,128,1148,512,972,524,680,644,540,820,360,692,268,628" href="" target="" /> 
    <area shape="poly" alt="" title="" coords="1192,40,1152,440,1384,500,1580,632,1696,804,2036,652,1876,380,1540,140,1364,72" href="" target="" /> 
    <area shape="poly" alt="" title="" coords="2112,620,1728,796,1772,792,1832,1060,1800,1280,1704,1456,1784,1484,2044,1644,2168,1368,2212,1100,2184,812" href="" target="" /> 
    <area shape="poly" alt="" title="" coords="1160,1756,1120,2152,1344,2148,1704,2040,1976,1860,2108,1684,1752,1464,1760,1504,1536,1700,1296,1776,1172,1764" href="" target="" /> 
    <area shape="poly" alt="" title="" coords="604,1460,716,1632,944,1796,1116,1832,1124,2224,1016,2224,664,2088,384,1856,256,1644,440,1548" href="" target="" /> 
    <area shape="poly" alt="" title="" coords="196,1672,540,1492,460,1260,500,996,592,812,572,832,264,624,104,968,80,1260,132,1512,136,1516" href="" target="" /> 
</map>

Как вы можете видеть, в дополнение к прямоугольнику и круг, каждая форма может быть определена как многоугольник.

Примечание:

можно вычислить координаты вручную (координаты верхнего левого угла области являются 0,0), или использовать инструмент такой как следующий, который вычисляет координаты с помощью графический интерфейс: