Introduction:
We can easily convert a single image into multiple clickable parts using Imagemap.

Main:

ImageMap Declaration,

<MAP NAME=”mapName”>
   <AREA
      [NAME="areaName"]
      COORDS=”x1,y1,x2,y2,…” | “x-center,y-center,radius”
      HREF=”location”
      [SHAPE="rect" | "poly" | "circle" | "default"]
      [TARGET="windowName"]>
</MAP>

for ex,

<IMG SRC=”img1.gif” HEIGHT=69 WIDTH=194 ALT=”HTML” BORDER=0 USEMAP=”#html_map”> <MAP NAME=”html_map”>
<AREA
   NAME=”H”
   COORDS=”0, 0, 55, 69″
   HREF=”javascript:alert(‘Hyper’)”
   SHAPE=”rect”
   onMouseOver=”window.status = ‘Hyper’; return true”
   onMouseOut=”window.status = ”; return true”>
<AREA
   NAME=”T”
   COORDS=”56, 0, 101, 69″
   HREF=”javascript:alert(‘Text’)”
   SHAPE=”rect”
   onMouseOver=”window.status = ‘Text’; return true”
   onMouseOut=”window.status = ”; return true”>
<AREA
   NAME=”M”
   COORDS=”102, 0, 161, 69″
   HREF=”javascript:alert(‘Markup’)”
   SHAPE=”rect”
   onMouseOver=”window.status = ‘Markup’; return true”
   onMouseOut=”window.status = ”; return true”>
<AREA
   NAME=”L”
   COORDS=”161, 0, 194, 69″
   HREF=”javascript:alert(‘Language’)”
   SHAPE=”rect”
   onMouseOver=”window.status = ‘Language’; return true”
   onMouseOut=”window.status = ”; return true”>
</MAP>

Conclusion:
Hope,this helps,
Happy Coding.