You are here: irt.org | Articles | JavaScript | Image | Fading Images in and out [ previous next ]
Published on: Saturday 17th January 1998 By: Martin Webb
This article will describe how to jazz up those boring old image highlights that the majority of us have on our web pages. Using the onMouseOver and onMouseOut events we will fade the image in and out using several different versions of the same image.
This article will use three examples to demonstrate the fading in and out of images, as a result the following images will be used:
one0.gif - |
And: |
two0.gif - |
And: |
0.gif - |
These images were created using Paint Shop Pro, by changing the color of the image using a Nescape Browser Safe Palette. This palette, is a selection of 216 colors which will be rendered correctly in all versions of Netscape, where the browser is being run in a 256 color mode.
The following image uses all 216 colors available in the Browser Safe Palette, you can load this image into your painting package and use the colors to create Browser safe images:
|
|
Note, this previous image of the palette is actually only 32 bits high by 32 bits wide at around 2Kb:
However using the following HTML we are able to view it at ten times its normal size: <IMG SRC="palette.gif" HEIGHT="320" WIDTH="320"> |
Alternatively you can load the following palette file into Paint Shop Pro when editing an image, and it will replace the colors of your image with those in the palette: Safe Palette.
Once the images were created, the color depth was decreased to 2 colors. This greatly reduces the size of each image. (Thanks to Gunilla Williams for explaining how to do this using Paint Shop Pro).
To fade in just one image is failry simple. First we preload the five images to be used, but only if the browser supports the images object. When the user moves the mouse pointer over the image to be faded in the onMouseOver event handler invokes the fadeInsingle() function.
The fadeInsingle() function changes the source of the image to the next image in the sequence, it then sets a timer using to setTimeout() which will reinvoke the fadeInsingle() function after 50 milliseconds. Finally it resets any timer set by the fadeOutsinglr() function.
If the user moves the mouse pointer away from the image then the onMouseOut event handler invokes the fadeOutsingle() function which chnages the source of the image to the previous image in the sequence, and sets a timer to reinvoke the fadeOutsinglr() function in 100 milliseconds. Finally it resets the timer set by the fadeInsingle() function.
Both the fadeInsingle() and fadeOutsingle() function ensure that the images object is supported before attempting to change the source of the image.
The separate times referenced by singleInTimeout and singleOutTimer allow us to cancel or restart the fading in or out of the image as soon as the user moves the mouse pointer over or away from the image. The singleI variable controls the position within the image sequence.
The name of the image to be replaced, single is hard coded within the JavaScript functions.
Note, it is important that the images are all of the size width and height, and that the images do not include a transparent background color.
<SCRIPT LANGUAGE="JavaScript"><!--
if (document.images != null) {
single0 = new Image();single0.src = "one0.gif";
single1 = new Image();single1.src = "one1.gif";
single2 = new Image();single2.src = "one2.gif";
single3 = new Image();single3.src = "one3.gif";
single4 = new Image();single4.src = "one4.gif";
var singleI = 0, singleInTimeout = singleOutTimeout = null;
}
function fadeInsingle() {
if (document.images != null && singleI < 4) {
document.images['single'].src = eval('single' + (++singleI) + ".src");
singleInTimeout = setTimeout('fadeInsingle()',50);
clearTimeout(singleOutTimeout);
}
}
function fadeOutsingle() {
if (document.images != null && singleI > 0) {
document.images['single'].src = eval('single' + (--singleI) + ".src");
singleOutTimeout = setTimeout('fadeOutsingle()',100);
clearTimeout(singleInTimeout);
}
}
//--></SCRIPT>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeInsingle()"
onMouseOut="fadeOutsingle()"
><IMG SRC="one0.gif" NAME="single" BORDER=0 HEIGHT=20 WIDTH=64></A>Which when run looks something like this:
Fading different images on the same page the JavaScript functins we create to support the fading in and out of images must be able to receive and process the name of the image to fade. When passed the image name, imgName, the fadeIn() and fadeOut() functions use eval() to evaluate the value of the appropriate images I variable, i.e. oneI or twoI. There has to be two variables, as we will be allowing one image to fade in where another image might be fading out. For this reason we also need different variables for the timers.
Rather than always clear the opposite timer, on clears out, and out clears on, every time, we have included variables to indicate whether a timer is running which we can check to determine whether they need to be cleared, i.e. oneOutTimer, oneInTimer, twoOutTimer and twoInTimer.
The timers must now, when invoking the relevant fadeIn() or FadeOut() functions, pass the name of the current image. Becaue this is a string within a string within a string (note we are using the eval() statement), we have to carefully escape the required number of single quotes.
<SCRIPT LANGUAGE="JavaScript"><!--
if (document.images != null) {
one0 = new Image();one0.src = "one0.gif";
one1 = new Image();one1.src = "one1.gif";
one2 = new Image();one2.src = "one2.gif";
one3 = new Image();one3.src = "one3.gif";
one4 = new Image();one4.src = "one4.gif";
two0 = new Image();two0.src = "two0.gif";
two1 = new Image();two1.src = "two1.gif";
two2 = new Image();two2.src = "two2.gif";
two3 = new Image();two3.src = "two3.gif";
two4 = new Image();two4.src = "two4.gif";
var oneI = 0, oneInTimeout = oneOutTimeout = null, oneOutTimer = oneInTimer = false;
var twoI = 0, twoInTimeout = twoOutTimeout = null, twoOutTimer = twoInTimer = false;
}
function fadeIn(imgName) {
if (document.images != null) {
var i = eval(imgName + 'I') + 1;
eval(imgName + 'I' + '= i');
if (eval(imgName + 'OutTimer')) clearTimeout(eval(imgName + 'OutTimeout'));
document.images[imgName].src = eval(imgName + i + '.src');
eval(imgName + 'InTimer = true');
if (i<4) eval(imgName + 'InTimeout = setTimeout(\'fadeIn("\'+imgName+\'")\',50)');
else eval(imgName + 'InTimer = false');
}
}
function fadeOut(imgName) {
if (document.images != null) {
var i = eval(imgName + 'I') - 1;
eval(imgName + 'I' + '= i');
if (eval(imgName + 'InTimer')) clearTimeout(eval(imgName + 'InTimeout'));
document.images[imgName].src = eval(imgName + i + '.src');
eval(imgName + 'OutTimer = true');
if (i>0) eval(imgName + 'OutTimeout = setTimeout(\'fadeOut("\'+imgName+\'")\',100)');
else eval(imgName + 'OutTimer = false');
}
}
//--></SCRIPT>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeIn('one')"
onMouseOut="fadeOut('one')"
><IMG SRC="one0.gif" NAME="one" BORDER=0 HEIGHT=20 WIDTH=64></A>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeIn('two')"
onMouseOut="fadeOut('two')"
><IMG SRC="two0.gif" NAME="two" BORDER=0 HEIGHT=20 WIDTH=64></A>Which when run looks something like this:
When fading multiple instance of the same image, we need to combine the last two examples to create the following fadeInImage() and fadeOutImage() functions, which accept the name of the image to be modified, but include the hardcoded name of the preloaded images to be used in the replacement.
Each copy of the image within the document must have its own set of variables.
<SCRIPT LANGUAGE="JavaScript"><!--
if (document.images != null) {
image0 = new Image();image0.src = "0.gif";
image1 = new Image();image1.src = "1.gif";
image2 = new Image();image2.src = "2.gif";
image3 = new Image();image3.src = "3.gif";
image4 = new Image();image4.src = "4.gif";
var aI = 0, aInTimeout = aOutTimeout = null, aInTimer = aOutTimer = false;
var bI = 0, bInTimeout = bOutTimeout = null, bInTimer = bOutTimer = false;
var cI = 0, cInTimeout = cOutTimeout = null, cInTimer = cOutTimer = false;
var dI = 0, dInTimeout = dOutTimeout = null, dInTimer = dOutTimer = false;
var eI = 0, eInTimeout = eOutTimeout = null, eInTimer = eOutTimer = false;
}
function fadeInImage(imgName) {
if (document.images != null) {
var i = eval(imgName + 'I') + 1;
eval(imgName + 'I' + '= i');
if (eval(imgName + 'OutTimer')) clearTimeout(eval(imgName + 'OutTimeout'));
document.images[imgName].src = eval('image' + i + '.src');
eval(imgName + 'InTimer = true');
if (i<4) eval(imgName + 'InTimeout = setTimeout(\'fadeInImage("\'+imgName+\'")\',50)');
else eval(imgName + 'InTimer = false');
}
}
function fadeOutImage(imgName) {
if (document.images != null) {
var i = eval(imgName + 'I') - 1;
eval(imgName + 'I' + '= i');
if (eval(imgName + 'InTimer')) clearTimeout(eval(imgName + 'InTimeout'));
document.images[imgName].src = eval('image' + i + '.src');
eval(imgName + 'OutTimer = true');
if (i>0) eval(imgName + 'OutTimeout = setTimeout(\'fadeOutImage("\'+imgName+\'")\',100)');
else eval(imgName + 'OutTimer = false');
}
}
//--></SCRIPT>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeInImage('a')"
onMouseOut="fadeOutImage('a')"
><IMG SRC="0.gif" NAME="a" BORDER=0 WIDTH=21 HEIGHT=21></A>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeInImage('b')"
onMouseOut="fadeOutImage('b')"
><IMG SRC="0.gif" NAME="b" BORDER=0 WIDTH=21 HEIGHT=21></A>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeInImage('c')"
onMouseOut="fadeOutImage('c')"
><IMG SRC="0.gif" NAME="c" BORDER=0 WIDTH=21 HEIGHT=21></A>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeInImage('d')"
onMouseOut="fadeOutImage('d')"
><IMG SRC="0.gif" NAME="d" BORDER=0 WIDTH=21 HEIGHT=21></A>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeInImage('e')"
onMouseOut="fadeOutImage('e')"
><IMG SRC="0.gif" NAME="e" BORDER=0 WIDTH=21 HEIGHT=21></A>Which when run looks something like this:
You will have noticed by now that the initial state of the images is in their bleached state. This is fine for browsers that support the images object, but for those browsers that don't, Netscape Navigator 2.x and Microsoft Internet Explorer 3.x, the images may be inappropriate. The following amended example shows how to overcome this.
The initial images are shown in their full unbleached state. Then a further JavaScript replaces them with their bleached versions, if the browser supports the images object:
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeInImage('a')"
onMouseOut="fadeOutImage('a')"
><IMG SRC="4.gif" NAME="a" BORDER=0 WIDTH=21 HEIGHT=21></A>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeInImage('b')"
onMouseOut="fadeOutImage('b')"
><IMG SRC="4.gif" NAME="b" BORDER=0 WIDTH=21 HEIGHT=21></A>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeInImage('c')"
onMouseOut="fadeOutImage('c')"
><IMG SRC="4.gif" NAME="c" BORDER=0 WIDTH=21 HEIGHT=21></A>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeInImage('d')"
onMouseOut="fadeOutImage('d')"
><IMG SRC="4.gif" NAME="d" BORDER=0 WIDTH=21 HEIGHT=21></A>
<A HREF="#" onClick="this.href='javascript:alert(\'just testing\')'"
onMouseOver="fadeInImage('e')"
onMouseOut="fadeOutImage('e')"
><IMG SRC="4.gif" NAME="e" BORDER=0 WIDTH=21 HEIGHT=21></A>
<SCRIPT LANGUAGE="JavaScript"><!--
if (document.images != null) {
document.images['a'].src = eval('image0.src');
document.images['b'].src = eval('image0.src');
document.images['c'].src = eval('image0.src');
document.images['d'].src = eval('image0.src');
document.images['e'].src = eval('image0.src');
}
//--></SCRIPT>Which when run will look something like this:
Macromedia Fireworks Image Map Tutorial