Change Image When Mouse is Moved Over a Link 
With JavaScript 1.1+, you can change an image when the mouse is moved over. Netscape Navigator 4.0
and Microsoft Internet Explorer 4.0 supports this fully.
Netscape 3.0 do not fully support transparent images. If you want to swap transparent pictures, the transparent area on the pictures must be the same. The reason: Netscape 3.0 do not restore the background when swapping images. It simply puts the new image on top of the old. If the transparent areas are not the same, you will see parts of the other images.
First, include this javascript:
<script language=javascript type="text/javascript">
<!--
// NS3+/MSIE4+ compatibility test (for javascript image swapping)
compat = parseInt( navigator.appVersion ) >= 3 &&
navigator.userAgent.indexOf("MSIE 3") == -1;
// cache images for quick swapping
if( compat )
{ MyNormal = new Image;(150,112)
MyNormal.src = "normal.gif";
MyOver= new Image;(150,112)
MyOver.src = "over.gif";
}
// swap images using the cached images
function Swap(x, y)
{ if (compat) { document.images[x].src=eval(y+'.src'); }
}
// -->
</script>
If you want to use transparent image-swapping with different transparent areas, which is not fully supported by Netscape Navigator 3, change:
compat = parseInt( navigator.appVersion ) >= 3 && navigator.userAgent.indexOf("MSIE 3") == -1;
to
compat = parseInt( navigator.appVersion ) >= 4
Then add a name=unique identifier to the <img> tag like this:
<img src="normal.gif" width=150 height=112 border=0 name="MyImage">
The image-swap will only occur on links. Add
OnMouseOver="Swap('MyImage','MyOver')" OnMouseOut="Swap('MyImage','MyNormal')"
to a <a> tag, like this:
<a href="MyURL" OnMouseOver="Swap('MyImage','MyOver')" OnMouseOut="Swap('MyImage','MyNormal')"> MyLink </a>
Image-swapping also works with Client Side Image Map. Add to the <area> tags instead.
|
