Image rollovers and image replacement can be made really easy with jQuery and with no plug ins necessary. They can be done with CSS and other techniques but by welding the power of jQuery you can assign a hover state to any image you need on the page.

Step 1 the jQuery

$('.rollover').hover(function() {
var currentImg = $(this).attr('src');
$(this).attr('src', $(this).attr('hover'));
$(this).attr('hover', currentImg);
}, function() {
var currentImg = $(this).attr('src');
$(this).attr('src', $(this).attr('hover'));
$(this).attr('hover', currentImg);
});

Step 2 the HTML

<a href="#"><img src="image1.jpg" hover="image1_over.jpg" width="62" height="28" border="0" class="rollover" /></a>

By assigning the class “rollover” we are calling the javascript and it will find the “hover” tag and replace the image in mouse over. It’s as easy as that!