How to make each section of an image clickable

Question

I need to be able to make each section in this image a separate link. If I make each section an image and overlay them it means that there is some overlap with the transparent background.

Is there a way to do this using SVGs or area maps?

Answer 1

You can use the HTML4 and HTML5 compatible <map> tag.

The <map> tag is used to define a client-side image-map (an image with clickable areas).

You'll need to define the map like this:

<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>

As you can see, in addition to rectangle and circle, each shape can be defined as a polygon.

NOTE:

You can calculate the coordinates manually (the coordinates of the top-left corner of an area are 0,0), or use a tool such as the following, that calculates the coordinates using a graphical interface:

• http://www.maschek.hu/imagemap

Answer 2

Yes,

You can map image. You can see samples here: Link