Articles | Introduction to
Image Maps | back
A single Imagemap
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.
Separate Images
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.
Floating Frame
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!
A single Imagemap - source code
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">
|
Separate Images - source code
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">
|
Floating Frame - source code
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 definition 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>
|
Articles | Introduction to
Image Maps |
back
|
