OnMouseOver image change JavaScript source
<< Back | Home | Next >>

  Instructions:

  1. Part one is the JavaScript function you need to change images
  2. Put first part of the script anywhere between your head tags. (<head> and </head>)
  3. Change "your animated gif" to the path of the gif you want to use when mouse is over image (link). Ex. "bullets/bul2on.gif"
  4. Change "your static gif" to the path of the gif you want to use when mouse is out of the image (link). Ex. "bullets/bul2off.gif"
  5. Part two is the DHTML to call the JavaScript function
  6. Put onMouseOver and onMouseOut part inside of the anchor tag. 
    Ex. <a href="home.htm" onMouseOver="changeImages('image1', 'image1on')" onMouseOut="changeImages('image1', 'image1off')">
  7. Put name of the image inside of the img tag (in this script its  image1). 
    Ex. <img name="image1" border="0" src="bullets/bullstatic.gif" width="19" height="15">

  Part 1. Put this part between your head tags:

<script language="JavaScript">
<!--
if (document.images) {
image1on = new Image();
image1on.src = "your animated gif";
image1off = new Image();
image1off.src = "your static gif";
}
function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
}}}
// -->
</script>

  Part 2. Put this line inside of the anchor tag of the link:

 onMouseOver="changeImages('image1', 'image1on')" onMouseOut="changeImages('image1', 'image1off')"

  Put this line inside of the img tag of the image:

name="image1"

  Result: