JQuery image rollover

This is a simple javascript snippet to create an image rollover. Whenever the mouse pointer hovers on the specific image, the original image is replaced with a new image. This is handy if you like to achive a black and white to color image transformation effect.

HTML markup

<img class="rollover" alt="image description" src="bw.img" hover="color.img" />

We use the class rollover for every image that needs to be rolled. The hover attribute is used to define the image to roll upon hover event.

Code snippet

The core of this effect is the swapImage() function, defined as follow:

function swapImage(image) {
    var current = $(image).attr('src');
    $(image).attr('src', $(image).attr('hover'));
    $(image).attr('hover', current);
}

The function will then be called in response to the hover event of the relevant images:

<script type="text/javascript">
$(document).ready(function() {
    $('.rollover').hover(function() {
        swapImage(this);
    }, function() {
        swapImage(this);
    });
});
</script>

View demo