Client-Side Image Map Example

The image map below uses JavaScript functions in each of its areas. Moving over an area will display information about it in the status line. Clicking on an area places the name of the area in the text field below the image map.
Clicked Item:

 

  • Source 
    <HTML>
<HEAD>
<TITLE>Image Map Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function update(text) {
   document.form1.text1.value = text;
}
</SCRIPT>
</HEAD>
<BODY>
<MAP NAME="map1">
<AREA SHAPE=RECT COORDS="14,15,151,87" HREF="javascript:update('service');"
 onMouseOver="window.status='Service Department'; return true;">
<AREA SHAPE=RECT COORDS="162,16,283,85" HREF="javascript:update('sales');"
 onMouseOver="window.status='Sales Department'; return true;">
<AREA SHAPE=RECT COORDS="294,15,388,87" HREF="javascript:update('info');"
 onMouseOver="window.status='Information'; return true;">
<AREA SHAPE=RECT COORDS="13,98,79,178" HREF="javascript:update('email');"
 onMouseOver="window.status='Email Us'; return true;">
<AREA SHAPE=RECT COORDS="92,97,223,177" HREF="javascript:update('products');"
 onMouseOver="window.status='Products'; return true;">
<AREA SHAPE=RECT COORDS="235,98,388,177" HREF="javascript:update('our staff');"
 onMouseOver="window.status='Our Staff'; return true;">
<AREA SHAPE=default HREF="javascript:update('No item selected.');"
 onMouseOver="window.status='Please select an item.'; return true;">
</MAP>
<h1>Client-Side Image Map Example</h1>
<hr>
The image map below uses JavaScript functions in each of its areas. Moving over
an area will display information about it in the status line. Clicking on an area
places the name of the area in the text field below the image map.
<hr>
<IMG SRC="imagemap.gif" USEMAP="#map1">
<hr>
<FORM NAME="form1">
<b>Clicked Item:</b>
<INPUT TYPE="text" NAME="text1" VALUE="Please select an item.">
</FORM>
<hr>
</BODY>
</HTML>