I put this code snippet together for the menu system on my web site. By using some basic naming conventions with your image file, you can do an image replacement with JQuery in just a few lines.

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);
	});
});