Wednesday, November 9, 2011
Image Maps with JavaScript
Image maps are a popular way to provide navigation for a site. They're images that are divided into a number of "hot spots," or areas that act as links. Using JavaScript, you can perform script commands when an area of the image is clicked.
As an example of using a client-side image map with JavaScript, let's create a simple image map menu for a fictional company. (The company's name isn't important, but it's obviously not a graphic design company.)
To create a client-side map, you need to do three things:
- Use your favorite graphics application to create the actual graphic as a GIF or JPEG image.
- Create a MAP definition that describes areas in the image.
- Include the image map in the document, using the USEMAP attribute to point to the map definition.
Listing 1 shows the example client-side image map definition.
Example 1. Using a client-side image map with JavaScript
<html>
<head>
<title>Image Map Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function update(t) {
document.form1.text1.value = t;
}
</script>
</head>
<body>
<map NAME="map1">
<area SHAPE=RECT COORDS="14,15,151,87" onClick="update('service')"
onMouseOver="window.status='Service Department'; return true">
<area SHAPE=RECT COORDS="162,16,283,85" onClick="update('sales')"
onMouseOver="window.status='Sales Department'; return true">
<area SHAPE=RECT COORDS="294,15,388,87" onClick="update('info')"
onMouseOver="window.status='Information'; return true">
<area SHAPE=RECT COORDS="13,98,79,178" onClick="update('email')"
onMouseOver="window.status='Email Us'; return true">
<area SHAPE=RECT COORDS="92,97,223,177" onClick="update('products')"
onMouseOver="window.status='Products'; return true">
<area SHAPE=RECT COORDS="235,98,388,177" onClick="update('our staff')"
onMouseOver="window.status='Our Staff'; return true">
<area SHAPE=default onClick="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>
This script uses the onMouseOver and onClick event handlers to perform its functions. Rather than link to an actual page, clicking on the areas will display a message in a text field (see Figure 13.1). In addition, the onMouseOver event handlers display a description in the status line for each area.
Figure1 An image map in JavaScript.
This program uses a single JavaScript function called update(), which simply places an item in the text field form1.text1. The text is sent directly by the link in each area definition.
