Image Map Triggered Image Rollovers

Image Map Triggered Image Rollovers
by
William Bontrager

Permission is granted to reprint the above article in its entirety, provided no reprints are sent in conjunction with unsolicited bulk email, provided no fee or other value is exchanged, provided no changes are made to the article, and provided the author's name, signature lines, and copyright line are printed with the article; except you may change the article's title.

This article shows you how to use image maps to trigger image rollovers.

If you are confident with image maps and JavaScript, you may wish to go right to the demo page. There you will find an example image map with with mouseover code to trigger image rollovers. The demo page is at http://willmaster.com/a/url.pl?54demo

On the other hand, if you know HTML but have never coded for image maps, you may wish to have a good reference handy. http://vzone.virgin.net/sizzling.jalfrezi/iniframe.htm is good.

The examples in this article will use code copied from the demo page.

First we'll place the image that will roll over and the image map. Then we'll insert the JavaScript code.

Here is the <IMG... tag for the image that will roll over:

<IMG SRC="seefuntag.gif" NAME="therollover" 
HEIGHT=170 WIDTH=180 BORDER=0 ALT="See All the Fun">

You'll see that the <IMG... tag is the same as for a regular image except it has a NAME attribute. The name (in this case "therollover") lets the browser know which image to change when called upon to do so.

Here is the <IMG... tag for the image map:

<IMG SRC="seafunmap.jpg" HEIGHT=230 WIDTH=348  
ALT="imagemap" usemap="#seafunmap.jpg" border="0">

You'll see that the <IMG... tag is the same as for a regular non-imagemap image except for the USEMAP attribute. The USEMAP attribute tells the browser where to find the image map coordinates and other data are specified. The image map coordinates are specified in a <map... tag.

The <map... tag can be anywhere on your page so long as it is somewhere between the <BODY... and </BODY> tags.

Here is how a <map... tag might look (before we add JavaScript statements):

<map name="seafunmap.jpg">
     <area shape="rect" coords="0,0,223,54" 
          href="yourpage.html" alt="bluefish">
     <area shape="rect" coords="1,177,147,238"
          href="yourpage.html" alt="starfish">
     <area shape="circle" coords="290,58,54" 
          href="yourpage.html" alt="dolphin">
     <area shape="rect" coords="184,188,348,230"
          href="yourpage.html" alt="goldfish">
     <area shape="rect" coords="74,59,223,176"
          href="yourpage.html" alt="seal">
</map>

Between the <map... and </map> tags you'll see five <area... tags.

Each <area... tag specifies the shape of the area, the coordinates of the shape, the URL that would normally be in an <a... anchor tag, and an alt="___" attribute. The alt="___" attribute is not required.

That completes the regular HTML image map. (For image map coordinates and other specifics, consult your HTML reference.)

Note: Netscape 4.7 for Macintosh may not always replace the image when the cursor moves off the designated coordinates of the image map, especially if the cursor is moved very fast or if the coordinates are on the border of the image. Of the other browsers we tested, Netscape on PC and IE on both platforms do not have that bug.

Now, the JavaScript.

Each <area... tag will need two JavaScript statements; one to replace the image when the mouse moves over the designated area and one to restore the image when the mouse moves out of the area.

The statement to replace the image when the mouse moves over the area looks like this:

onMouseOver="therollover.src='REPLACEMENT_IMAGE_NAME'"

Put the replacement image's URL in place of REPLACEMENT_IMAGE_NAME

The statement to restore the image when the mouse moves out of the area looks like this:

onMouseOut="therollover.src='ORIGINAL_IMAGE_NAME'"

Put the original image's URL in place of ORIGINAL_IMAGE_NAME

Notice that both of the above JavaScript statements reference an image with the name: therollover

That is the name specified in the <IMG... tag we first placed on the page, above. The name "therollover" lets the browser know which image is to be replaced. (Any name can be used so long as the name in the <IMG... tag and the name in the <area... tag's JavaScript statement are the same.)

With the JavaScript statements put into the <area... tags, the <map... tag might look like this:

<map name="seafunmap.jpg">
     <area shape="rect" coords="0,0,223,54" 
          href="yourpage.html"
          onMouseOver="therollover.src='bluefish.jpg'"
          onMouseOut="therollover.src='seefuntag.gif'"
          alt="bluefish">
     <area shape="rect" coords="1,177,147,238"
          href="yourpage.html"
          onMouseOver="therollover.src='starfish.jpg'"
          onMouseOut="therollover.src='seefuntag.gif'"
          alt="starfish">
     <area shape="circle" coords="290,58,54" 
          href="yourpage.html"
          onMouseOver="therollover.src='dolphin.jpg'"
          onMouseOut="therollover.src='seefuntag.gif'"
          alt="dolphin">
     <area shape="rect" coords="184,188,348,230"
          href="yourpage.html"
          onMouseOver="therollover.src='goldfish.jpg'"
          onMouseOut="therollover.src='seefuntag.gif'"
          alt="goldfish">
     <area shape="rect" coords="74,59,223,176"
          href="yourpage.html"
          onMouseOver="therollover.src='seal.jpg'"
          onMouseOut="therollover.src='seefuntag.gif'"
          alt="seal">
</map>

(You will, of course, replace "yourpage.html" with the correct URL of the page where people will go when they click.)

Preloading Images

Preloading the replacement images can make the rollovers a lot faster. The downside is that your page will take longer to load.

If you want to preload the replacement images, you can do so with this JavaScript code:

<script type="text/javascript" language="JavaScript">
<!-- Two program lines per image to be preloaded
image1 = new Image();
image1.src = "bluefish.jpg";
image2 = new Image();
image2.src = "starfish.jpg";
image3 = new Image();
image3.src = "dolphin.jpg";
image4 = new Image();
image4.src = "goldfish.jpg";
image5 = new Image();
image5.src = "seal.jpg";
// -->
</script>

Where you put the above code determines when the replacement images will be loaded.

If you put the code between the <HEAD... and <HEAD> tags, the images will load before the rest of the page. However, if you put this code near the bottom of your page, just above the </BODY> tag, then the images will load last.

So if it is important that the replacement images be ready for display as soon as your imagemap appears, put the preload code between the <HEAD... and <HEAD> tags.

On the other hand, if displaying the content of your entire page as soon as possible is more important than immediate response from your replacement images, put the preload code near the bottom of your page.

The demo has the preload code between the <HEAD... and <HEAD> tags.

To see the demo in action, go to http://willmaster.com/a/url.pl?54demo

Have fun!

Copyright 2000 William Bontrager
Programmer/Publisher, "WillMaster Possibilities" ezine
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com
Business Home Page: http://willmaster.com/