Change the image source on rollover using jQuery

Question

I have a few images and their rollover images. Using jQuery, I want to show/hide the rollover image when the onmousemove/onmouseout event happen. All my image names follow the same pattern, like this:

Original Image: Image.gif

Rollover Image: Imageover.gif

I want to insert and remove the "over" portion of image source in the onmouseover and onmouseout event, respectively.

How can I do it using jQuery?

Answer 1

To set up on ready:

$(function() {     $("img")         .mouseover(function() {              var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";             $(this).attr("src", src);         })         .mouseout(function() {             var src = $(this).attr("src").replace("over.gif", ".gif");             $(this).attr("src", src);         }); }); 

For those that use url image sources:

$(function() {         $("img")             .mouseover(function() {                var src = $(this).attr("src");                var regex = /_normal.svg/gi;                src = this.src.replace(regex,'_rollover.svg');                $(this).attr("src", src);              })             .mouseout(function() {                var src = $(this).attr("src");                var regex = /_rollover.svg/gi;                src = this.src.replace(regex,'_normal.svg');                $(this).attr("src", src);              });     }); 

Answer 2

I know you're asking about using jQuery, but you can achieve the same effect in browsers that have JavaScript turned off using CSS:

#element {     width: 100px; /* width of image */     height: 200px; /* height of image */     background-image: url(/path/to/image.jpg); }  #element:hover {     background-image: url(/path/to/other_image.jpg); } 

There's a longer description here

Even better, however, is to use sprites: simple-css-image-rollover