|
This feature allows you to add a little spice to a page.
With this script, you can change an image whenever someone moves the mouse pointer over
it, like the samples shown. This JavaScript feature will work with Netscape 3.0 and
above and Microsoft Internet Explorer 4.0 and above. Included is a browser check to
prevent any problems with older versions that cannot run this script.
- The following script needs to be added between the
<Head> tags of the HTML source:
<script
language="JavaScript">
<!--
bName = navigator.appName;
bVer = parseInt(navigator.appVersion);
if (bName == "Netscape" &&
bVer >= 3) ver = "n3";
else if (bName == "Netscape" && bVer == 2) ver = "n2";
else if (bName == "Microsoft Internet Explorer" && bVer >= 3) ver =
"n3";
else if (bName == "Microsoft Internet Explorer" && bVer < 3) ver =
"n2";
if (ver != "n2") {
buttonoff = new Image( );
buttonoff.src = "gifs/sample.gif";
buttonon = new Image ( );
buttonon.src = "gifs/sample1.gif";
} else {
buttonoff = "";
buttonon = "";
}
function changeImage(imagename,imagesrc) {
if (ver == "n2") return false;
document.images[imagename].src=imagesrc.src;
return true;
}
//-->
</script>
- You need to create at least two images - 1 for the normal
image and one when the mouse is moved over it. We'll use the following example:
sample.gif |
sample1.gif |
- You will need to also add the following to
the hyperlink itself:
<a href="sample.htm"
onmouseover="changeImage('sample',buttonon)"
onmouseout="changeImage('sample',buttonoff)">
<img src="gifs/sample.gif"
name="sample" border="0"
WIDTH="165" HEIGHT="20">
</a>
- Buttonoff.src is the normal
image. Buttonon.src is the image that appears in its place.
- To add more images, the red text needs to be
duplicated in its entirety and repeated immediately after. You MUST use different
names for each subsequent image, such as buttonoff1, buttonon1, buttoff2, buttonon2 (they
need to match),etc.
- View the source code of the frame on the left to see a
detailed example of this script using multiple images.
Back to Web Tips |
