Easy Javascript Mouseover Script

I worked out a way to do a simple Javascript Mouseover that works well, quick to deploy and is simple enough for n00bs.

The silly part about most image swap scripts is they double up on images. By doubling up, I mean an image that is rendered as the off state or mouseout is first created in Javascript then loaded once more into the <img> tag in HTML.

This script uses one Javascript Object for the off state and a "holder" image for the image you swap when you trigger the mouseover. This makes is quick and easy to drop into your web pages.

Put this javasscript in the head of your document.

<script type="text/javascript">
//these are all the off state images
var myimage1 = new Image();
myimage1.src = "myimage1Off.gif";
var myimage2 = new Image();
myimage2.src = "myimage2Off.gif";
var myimage3 = new Image();
myimage3.src = "myimage3Off.gif";
//this one holds the image that gets swapped out.
var holder = new Image();
</script>

Place these images in the body somewhere.

<img
onmouseover="holder.src=this.src; this.src=myimage1.src" onmouseout="this.src=holder.src"
src="myimage1On.gif" alt="" border="0" />
<img
onmouseover="holder.src=this.src; this.src=myimage2.src" onmouseout="this.src=holder.src"
src="myimage2On.gif" alt="" border="0" />
<img
onmouseover="holder.src=this.src; this.src=myimage3.src" onmouseout="this.src=holder.src"
src="myimage3On.gif" alt="" border="0" />

This script needs no function and no "id" or "name" attributes for your images need to be defined. Easy! You'll also notice that the mouseout events are all the same! This is because the mouseover first passes the image's source to the holder before swapping the image out. So all it needs to do to revert back is crap the same holder image.

Sometimes this script may flicker depending on your layout. I've only had this happen once or twice. It doesn't matter if your images butt up against each other either.

Enjoy!

PS: to link your images just wrap them in <a> tags.

• Slashdot it!
• Digg it:
  
• Del.icio.us