This is one of the oldest dynamic script I know. It was first introduced in Netscape Navigator 3.

Cross Browser Version

NN3 introduced the onmouseover and onmouseout events for the A (anchor) tag. It also introduced the image collection allowing some manipulation of the IMG tag. The src attribute was now read and write able meaning you could change the image file through scripting.

Sample: (works for allmost all javascript enabled browsers, but not IE3)

Code:

<a href="http://www.eae.net/webfx"
onmouseover="pic1.src='images/openfoldericon.gif'"
onmouseout="pic1.src='images/foldericon.gif'">
<img name="pic1" src="images/foldericon.gif"
width="16" height="16" border="0" alt="Back to WebFX">
</a>

IE4 version 1

With Internet Explorer 4.0 all elements can be manipulated and the rendering of the page is dynamic allowing changes after the page is loaded. This allowed the onmouseover and onmouseout to be moved from the anchor to the image itself. Now there is no need to name your images because the element can call itself with the name "this".

Sample: (Works in IE4 or better. Should work in Navigator 5, but we'll have to wait and see)

Code:

<img src="images/foldericon.gif" width="16" height="16" border="0"
onmouseover="this.src='images/openfoldericon.gif'"
onmouseout ="this.src='images/foldericon.gif'">

IE4 version 2

Internet Explorer also introduced event bubbling. As soon as an image is entered it causes an onmouseover event to occur. This event bubbles up to its container (usually a paragraph) and finally it comes to the document. When it comes to the document level we catch it! Here we have to see what element caused the onmouseover (because all element cause one). The element that caused it is called window.event.srcElement.

Explorer also allowed the developer to add custom attributes to the elements. (Navigator doesn't allow this. To bad!) So lets say we added the custom attribute overSrc to an image tag. At the document level we check for the IMG tag and then we check for the overSrc. If we find one we change the image!

Code:

This only needs to be written once! You can place it in an external javascript file!

<script type="text/javascript">
<!--

document.onmouseover = handleOver;
document.onmouseout  = handleOut;

function handleOver() {
	el = window.event.srcElement;
	if (el.tagName == "IMG") { //Check if over image
		if ((el.overSrc != null) && (el.overSrc != "")) { //check if valid overSrc
			el.srcBackup = el.src;		//Back up the src
			el.src = el.overSrc;
		}
	}
}

function handleOut() {
	el = window.event.srcElement;
	if (el.tagName == "IMG") { //Check if over image
		if ((el.overSrc != null) && (el.overSrc != "")
		&& (el.srcBackup != null)) {
		//Also check for valid backup
			el.src = el.srcBackup;
		}
	}
}
//-->
</script>

Now all images where you declare overSrc changes images dynamically

<img src="images/foldericon.gif" overSrc="images/openfoldericon.gif" width="16" height="16" border="0">

Note! The way it is implemented now is case sensetive. It is really easy to fix this but the code gets a little bit harder to read. You'll have to replace all el.overSrc with el.getAttribute("oversrc")!

IE5 behavior version

Internet Explorer 5.0 developer preview introduced behaviors, see the article where I explain how to make a blink behaviour. First you create a scriptlet file, over.sct This scriptlet is even easier than the one in the blink behavior article. The code is very similar to the one above. (I changed the name of overSrc to overSrc2 to distinguish). Then you set the behavior using style sheets. I did this with an inline style sheet but usually you would have it declared in the style tag in the head.

Sample: (Only works in IE5)

Code:

<img style="behavior: url(over.sct);" src="images/foldericon.gif" overSrc2="/images/openfoldericon.gif">

Here I've made it case insensetive! See that wasn't so hard :-)