Describing the hotspots

Consider a example of a image using the hotspots colored region using the coordinates.

For rectangular hotspot, use the syntax.

coords="left, top, right, bottom"

left & top are the x and y coordinates of the top-left corner
right & bottom are the the x and y coordinates of the bottom-right corner
e.g. coords="50, 50, 250, 150", coords="100, 100, 200, 300"

For circular hotspot use the syntax:

coords="center-x, center-y, radius"

center-x, center-y are the coordinates of the center and radius is the radius of the circle.

e.g. coords="100, 400, 50"

For polygonal hotspot, use the syntax:

coords: x1, y1, x2, y2,...xN, yN"

coords="50, 50, 250, 150, 350, 450"

snippet

<html>
<head></head>
<body>
<img src=logo.jpg" usemap="#map_name">
<map name="map_name">
<area href="page1.html" shape="rect" coords="100,100,200,200">
<area href="pdf.html" shape="circle" coords="100,400,500">
<area href="image.jpeg" shape="poly" coords="200,350,400,200,450">
<area href="desc.txt" shape="default">
</map>
</body>
</html>

Output

When two areas are overlapped. the priority is determined by the order in which the <area> elements appear inside the map element.