Circular Hot Spot

<!-- ~~~~~~~~~~  CODE ~~~~~~~~~ -->

<img usemap="#circle"
    alt="Circular Hot Spot"
    src="images/circle_hot_spot.png"
    style="width: 200px; height: 200px;
    border: 0px;" />

<map name="circle" id="circle">
    <area shape="circle"
       coords="101, 102, 88"
       href="#"
       alt="Circle Hot Spot"
       title="Circular Imagemap" />
</map>

Rectangular Hot Spot

<!-- ~~~~~~~~~~  CODE ~~~~~~~~~ -->

<img usemap="#rect"
         alt="Retangular Hot Spot"
         src="images/rect_hot_spot.png"
         style="width: 200px;
                  height: 128px;
                   border: 0px;" />

       <map name="rect" id="rect">
         <area shape="rect"
          coords="6,  8,  194,  115"
           href="#"
           alt="Rectangle Hot Spot"
           title="Rectangular Imagemap" />
       </map>

Polygon Hot Spot

<!-- ~~~~~~~~~~  CODE ~~~~~~~~~ -->

<img usemap="#poly"
    alt="Ploygon Hot Spot"
    src="images/poly_hot_spot.png"
    style="width: 200px;
              height: 250px;
               border: 0px;" />

 <map name="poly" id="poly">
    <area shape="poly"
                   coords="15,  20, 116, 20,
                       116, 141, 195, 141,
                         195, 226, 15, 226"
                         href="#"
                        alt="Polygon Hot Spot"
                        title="Poly Imagemap" />
</map>

All Together

<!-- ~~~~~~~~~~  CODE ~~~~~~~~~ -->

       <img usemap="#all"
        alt="All Hot Spots"
        src="images/all_hot_spots.png"
        style="width: 250px;
        height: 250px; border: 0px;"/>

      <map name="all" id="all">
        <area shape="circle"
        coords="70,  71,  67"
         href="#"
         alt="Circle Hot Spot"
         title="Circular Hotspot" />

        <area shape="rect"
         coords="145,  11,  239,  106"
         href="#"
         alt="Rectangle Hot Spot"
         title="Rectangular Hotspot" />

        <area shape="poly"
         coords="144, 116, 241, 115,
         242, 247, 16, 247, 16, 159, 144, 159"
         href="#"
         alt="Polygon Hot Spot"
         title="Polygon Hotspot" />

      </map>