Image Map Display

The following combines imagemaps and JavaScript to produce a message in a text box when the mouse is moved over different parts of an image. This is good if you need a more detailed description of part of an image.

<img src="image.gif" alt="Image" width="367" height="106" border="0" usemap="#mapname"><br>
<br>
<form name="myform">
<input type="text" name="display" size="20">
</form>
</div>

<script language="javascript">

function showtext(place){

document.myform.display.value = place

}

</script>

<map name="mapname">
<area shape="polygon" onMouseOver="showtext('Cash_Register')" onMouseOut="showtext('')" alt="Cash" coords="94,10,95,25" href="file1.html">
<area shape="polygon" onMouseOver="showtext('Cellular_Phone')" onMouseOut="showtext('')" alt="Cell Phone" coords="206,2,209,19" href="file2.html">
<area shape="polygon" onMouseOver="showtext('Toy_Box')" onMouseOut="showtext('')" alt="box" coords="356,25,359,75" href="file3.html">
<area shape="default" nohref>
</map>

Notes:

  1. The imagemap displayed here is from the example. You can learn how to make imagemaps at the imagemap lesson.
  2. To ensure the code is copied correctly, please click here.

See it in action.