• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Image Maps

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)

            JavaScript and Image Maps 

        <SCRIPT LANGUAGE="JavaScript"> 
            function notify()
					window.alert("The guest book is unavailable.")

       <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"
					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" 
               ALT="Guest book"> 
           <AREA SHAPE="RECT" COORDS="360,67 471,89" 
               ALT="Create a Web page"> 
           <AREA SHAPE="RECT" COORDS="328,98 439,120" 
               "Hottest 100 sites"> 
               ALT="Image map"> 




Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint