Image Maps | Inside JavaScript

Another use for JavaScript with images is to handle image maps. As we know, you can use JavaScript URLs with HREF attributes, and the <AREA> elements you use in image maps support the HREF attribute. Usually, the HREF attribute of <AREA> elements points to URLs the browser navigates to when the corresponding area in the image map is clicked, but you also can execute JavaScript code instead. Here's an example showing how this works. When the user clicks the Guest Book label in the following code, a JavaScript function displays an alert box with the text The guest book is unavailable. :

(Listing 15-11.html on the web site)

 <HTML>      <HEAD>          <TITLE>              JavaScript and Image Maps          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function notify()   {   window.alert("The guest book is unavailable.")   }  //-->          </SCRIPT>      </HEAD>      <BODY BGCOLOR="BLACK">         <IMG WIDTH="528" HEIGHT="137" SRC="mainmenu.jpg"             BORDER="0" ALT="Image Map" USEMAP="#MAP" ALIGN="CENTER">             <MAP NAME="MAP">                 <AREA SHAPE="RECT" COORDS="16,39 127,61"                 HREF="http://www.reuters.com" ALT="News">  <AREA SHAPE="RECT" COORDS="62,71 173,93"   HREF="http://www.starpowder.com/steve/search.html"   ALT="Web search">  <AREA SHAPE="RECT" COORDS="98,104 209,126"                 HREF="http://www.nnic.noaa.gov" ALT="Weather">             <AREA SHAPE="RECT" COORDS="411,35 522,57"                 HREF="javascript:notify()"                 ALT="Guest book">             <AREA SHAPE="RECT" COORDS="360,67 471,89"                 HREF="http://www.yahoo.com/Guides_and_Tutorials/"                 ALT="Create a Web page">             <AREA SHAPE="RECT" COORDS="328,98 439,120"                 HREF="http://www.web21.com/services/hot100/index.html"                 "Hottest 100 sites">             <AREA NAME="DEFAULT" SHAPE="DEFAULT"                 HREF=                 "http://www.starpowder.com/steve/index.html#mainmenu"                 ALT="Image map">         </MAP>      </BODY>  </HTML>

You can see the results of this code in Figure 15.11 (the image for this example, mainmenu.jpg, is on the web site), where I've clicked the Guest Book label.

Figure 15.11. Using JavaScript in an image map.

graphics/15fig11.gif

That completes our work with images in this chapter. Next I'll take a look at working with events in depth.