First, you need to create two images. Let’s make them both .gif images so we can keep the files small. For the hover image, add the extension “_hov” to whatever you named your first file.

Here are two example files:

Put them up there with some simple html:

<div id="links">
        	<a href="#"><img src="images/example.gif" /></a>
</div>

 With the magic of JQuery, you can remove “.gif” from the end of the image name and replace it with “_hov.gif” on mouseover. It will do this for any <a> tags in the links div.

$(document).ready(function() {
	$("#links a img").mouseout(function(){
	  	var imageName = $(this).attr("src");
		imageName = imageName.replace("_hov.gif", ".gif");
	  	$(this).attr("src", imageName);
	}).mouseover(function(){
	  	var imageName = $(this).attr("src");
	  	imageName = imageName.replace(".gif", "_hov.gif");
	  	$(this).attr("src", imageName);
	});
});