Creating a polygonal hotspot

What do you if your image is not rectangular or circular shaped and you wanted to create a hotspot? For irregular shaped images, you can use the polygon hotspot. To create a polygon hotspot, use the poly value for the shape attribute. Just like we did with the rectangular and circular hotspots, we supply the coordinate values for the desired place of hotspot on an image. We will use the following image

Polygon shape

with the following coordinate values: (18, 86), (141, 95), (142, 14), (27, 24), and (1, 50). The following image shows where each of these points are located on the image:

Polygon hotspot coordinates
Polygon hotspot coordinates

Next, we use the coordinate information shown above to create our <map> tag with the <area> tag:

<map name="polygonalHotspot">
<area shape="poly" coords="18,86,141,95,142,14,27,24,1,50" href="">

Finally, add the hotspot name to the <img> tag to create the polygonal hotspot:

<img src="" alt="Polygon shape" width="150" height="100" border="0" usemap="#polygonalHotspot">

Remember to use the pound sign before the image map name. The following shows the output of the above code:

Polygon shape