You are here: irt.org | Articles | JavaScript | Image | Image Maps [ previous next ]
Published on: Saturday 21st June 1997 By: Martin Webb
This is a simple example of an imagemap. When you pass your mouse pointer over the grey images, they highlight. This is achieved by using a client-side image map, and changing the complete image using onMouseOver and onMouseOut. View Source Code.
This is a another example of an imagemap. This time the image is split into three separate images and three separate image maps. This allows a smaller image to be reloaded each time. Ideal for large, complicated images. View Source Code.
  
|
This last example (if visible) demonstrates a possible solution for MSIE 3.0, which does not support the image array in JScript. It uses floating frames to enable the entire frame to refresh the image displayed. View Source Code. 30/08/97 - Unfortunately this will not work - MSIE 3.0 does not support the onMouseOver event within an image map - sorry!
The code for the first example is shown below. It preloads the images for Netscape 3+ or MSIE 4+.
An imagemap called image-map is defined with three areas, each of which uses the onMouseOver and onMouseOut events to change the status bar text and invoke the changeImagemap() function to swap the complete image with another one.
The HREF locations are all currently set to show an alert() message. This can easily be changed so that clicking the highlighted imagemap portion changes the current document.
The changeImagemap() function is hardcoded to change the image named boxImage each time it is passed the name of the new image, i.e. newImage to show.
The boxImage image is then defined as an imagemap image using USEMAP= followed by the location of the imagemap defintion #image-map.
Notice that in this example the image is not wrapped in a link, i.e. clicking the image will not result in a change to the current document, unless its within one of the areas defined within the imagemap definition.
<SCRIPT LANGUAGE="JavaScript"><!--
var js = 1.0;
Version = parseInt(navigator.appVersion);
if (navigator.appName == "Netscape")
js = ((Version >= 4) ? 1.2 : ( (Version == 3) ? 1.1 : 1.0 ));
else
if (navigator.appVersion.indexOf('MSIE') != -1)
js = ((Version >= 4) ? 1.1 : 1.0);
function changeImagemap(newImage) {
if (js > 1.0) document ['boxImage'].src = eval(newImage + ".src");
}
if (js > 1.0) {
white = new Image();
white.src = "white.gif";
red = new Image();
red.src = "red.gif";
green = new Image();
green.src = "green.gif";
blue = new Image();
blue.src = "blue.gif";
}
//-->
</SCRIPT>
<MAP NAME="image-map">
<AREA SHAPE="RECT" COORDS="15,15,85,85" HREF="javascript:alert('red')"
onMouseOver="changeImagemap('red');self.status='Red Square';return true"
onMouseOut="changeImagemap('white');self.status='';return true">
<AREA SHAPE="RECT" COORDS="93,15,110,85" HREF="javascript:alert('green')"
onMouseOver="changeImagemap('green');self.status='Green Rectangle';return true"
onMouseOut="changeImagemap('white');self.status='';return true">
<AREA SHAPE="CIRCLE" COORDS="150,50,35" HREF="javascript:alert('blue')"
onMouseOver="changeImagemap('blue');self.status='Blue Circle';return true"
onMouseOut="changeImagemap('white');self.status='';return true">
</MAP>
<IMG NAME="boxImage" SRC="white.gif" BORDER=0
WIDTH=200 HEIGHT=100 USEMAP="#image-map">The code for the second example is shown below. This example is not that much different from the previous. Instead of there being one imagemap, there is now three. The three images reference the appropriate imagemap definition.
The changeImages() function called by the onMouseOver and onMouseOut events, is passed two parameters, the image to change, i.e. oldImage, and the image to replace it with, i.e. newImage.
<SCRIPT LANGUAGE="JavaScript"><!--
var js = 1.0;
Version = parseInt(navigator.appVersion);
if (navigator.appName == "Netscape")
js = ((Version >= 4) ? 1.2 : ( (Version == 3) ? 1.1 : 1.0 ));
else
if (navigator.appVersion.indexOf('MSIE') != -1)
js = ((Version >= 4) ? 1.1 : 1.0);
function changeImages(oldImage,newImage) {
if (js > 1.0) document [oldImage].src = eval(newImage + ".src");
}
if (js > 1.0) {
a1 = new Image();
a1.src = "a1.gif";
a2 = new Image();
a2.src = "a2.gif";
a3 = new Image();
a3.src = "a3.gif";
b1 = new Image();
b1.src = "b1.gif";
b2 = new Image();
b2.src = "b2.gif";
b3 = new Image();
b3.src = "b3.gif";
}
//-->
</SCRIPT>
<MAP NAME="image-map1">
<AREA SHAPE="RECT" COORDS="15,15,85,85" HREF="javascript:alert('red')"
onMouseOver="changeImages('image1','b1');self.status='Red Square';return true"
onMouseOut="changeImages('image1','a1');self.status='';return true">
</MAP>
<MAP NAME="image-map2">
<AREA SHAPE="RECT" COORDS="8,15,25,85" HREF="javascript:alert('green')"
onMouseOver="changeImages('image2','b2');self.status='Green Rectangle';return true"
onMouseOut="changeImages('image2','a2');self.status='';return true">
</MAP>
<MAP NAME="image-map3">
<AREA SHAPE="CIRCLE" COORDS="41,50,35" HREF="javascript:alert('blue')"
onMouseOver="changeImages('image3','b3');self.status='Blue Circle';return true"
onMouseOut="changeImages('image3','a3');self.status='';return true">
</MAP>
<IMG NAME="image1" SRC="a1.gif" BORDER=0 WIDTH=85 HEIGHT=100 USEMAP="#image-map1"
><IMG NAME="image2" SRC="a2.gif" BORDER=0 WIDTH=24 HEIGHT=100 USEMAP="#image-map2"
><IMG NAME="image3" SRC="a3.gif" BORDER=0 WIDTH=91 HEIGHT=100 USEMAP="#image-map3">The code for the third example is shown below. There are two parts. The first part, the definition of a JavaScript variable imageMapName and the definiton of the floating frame with IFRAME are both placed within the main document.
The second part is a separate document, named iframe.htm in this example. The iframe.htm document is fairly similar to the first example, in that it uses one imagemap to control the image swapping. However, instead of swapping the image, it uses the changeImagemap() function to change the imageMapName variable in the parent document to the name of the new image to be displayed, and then refreshes iteself, i.e. the floating frame.
Each time the floating frame is loaded it uses the contents of the imageMapName variable in the parent frame to control the actual image displayed. This is done using parent.imageMapName.
<SCRIPT LANGUAGE="JavaScript"><!-- var imageMapName = "white" //--></SCRIPT> <IFRAME FRAMEBORDER=0 WIDTH=200 HEIGHT=100 MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=no SRC="iframe.htm"> </IFRAME>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function changeImagemap(newImage) {
if (parent.imageMapName != newImage) {
parent.imageMapName = newImage;
history.go(0);
}
}
//--></SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
document.write('<IMG SRC="' + parent.imageMapName + '.gif ');
document.write('BORDER=0 WIDTH=200 HEIGHT=100 USEMAP="#spinner-map">');
//--></SCRIPT>
<MAP NAME="spinner-map">
<AREA SHAPE="RECT" COORDS="15,15,85,85" HREF="javascript:alert('red')"
onMouseOver="changeImagemap('red');self.status='Red Square';return true"
onMouseOut="changeImagemap('white');self.status='';return true">
<AREA SHAPE="RECT" COORDS="93,15,110,85" HREF="javascript:alert('green')"
onMouseOver="changeImagemap('green');self.status='Green Rectangle';return true"
onMouseOut="changeImagemap('white');self.status='';return true">
<AREA SHAPE="CIRCLE" COORDS="150,50,35" HREF="javascript:alert('blue')"
onMouseOver="changeImagemap('blue');self.status='Blue Circle';return true"
onMouseOut="changeImagemap('white');self.status='';return true">
</MAP>
<CENTER>
</BODY>
</HTML>Macromedia Fireworks Image Map Tutorial