Bdtjtk

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

If you have more than one image and you need something generic that doesn't depend on a naming convention.

HTML

<img data-other-src="big-zebra.jpg" src="small-cat.jpg">

<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">

<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

JavaScript

$('img').bind('mouseenter mouseleave', function() {

    $(this).attr({

        src: $(this).attr('data-other-src') 

        , 'data-other-src': $(this).attr('src') 

    })

});

    /* Teaser image swap function */

    $('img.swap').hover(function () {

        this.src = '/images/signup_big_hover.png';

    }, function () {

        this.src = '/images/signup_big.png';

    });

A generic solution that doesn't limit you to "this image" and "that image" only may be to add the 'onmouseover' and 'onmouseout' tags to the HTML code itself.

HTML

<img src="img1.jpg" onmouseover="swap('img2.jpg')" onmouseout="swap('img1.jpg')" />

JavaScript

function swap(newImg){

  this.src = newImg;

}

Depending on your setup, maybe something like this would work better (and requires less HTML modification).

HTML

<img src="img1.jpg" id="ref1" />

<img src="img3.jpg" id="ref2" />

<img src="img5.jpg" id="ref3" />

JavaScript / jQuery

// Declare Arrays

  imgList = new Array();

  imgList["ref1"] = new Array();

  imgList["ref2"] = new Array();

  imgList["ref3"] = new Array();



//Set values for each mouse state

  imgList["ref1"]["out"] = "img1.jpg";

  imgList["ref1"]["over"] = "img2.jpg";

  imgList["ref2"]["out"] = "img3.jpg";

  imgList["ref2"]["over"] = "img4.jpg";

  imgList["ref3"]["out"] = "img5.jpg";

  imgList["ref3"]["over"] = "img6.jpg";



//Add the swapping functions

  $("img").mouseover(function(){

    $(this).attr("src", imgList[ $(this).attr("id") ]["over"]);

  }



  $("img").mouseout(function(){

    $(this).attr("src", imgList[ $(this).attr("id") ]["out"]);

  }

$('img.over').each(function(){

    var t=$(this);

    var src1= t.attr('src'); // initial src

    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension

    t.hover(function(){

        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   

    }, function(){

        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name

    });

});

You may want to change the class of images from first line. If you need more image classes (or different path) you may use

$('img.over, #container img, img.anotherOver').each(function(){

and so on.

It should work, I didn't test it :)

I was hoping for an über one liner like:

$("img.screenshot").attr("src", $(this).replace("foo", "bar"));

If the solution you are looking for is for an animated button, then the best you can do to improve in performance is the combination of sprites and CSS. A sprite is a huge image that contains all the images from your site (header, logo, buttons, and all decorations you have). Each image you have uses an HTTP request, and the more HTTP requests the more time it will take to load.

.buttonClass {

    width: 25px;

    height: 25px;

    background: url(Sprite.gif) -40px -500px;

}

.buttonClass:hover {

    width: 25px;

    height: 25px;

    background: url(Sprite.gif) -40px -525px;

}

The 0px 0px coordinates will be the left upper corner from your sprites.

But if you are developing some photo album with Ajax or something like that, then JavaScript (or any framework) is the best.

Have fun!

$('img').mouseover(function(){

  var newSrc = $(this).attr("src").replace("image.gif", "imageover.gif");

  $(this).attr("src", newSrc); 

});

$('img').mouseout(function(){

  var newSrc = $(this).attr("src").replace("imageover.gif", "image.gif");

  $(this).attr("src", newSrc); 

});

Whilst looking for a solution some time back, I found a similar script to the below, which after some tweaking I got working for me.

It handles two images, that almost always default to "off", where the mouse is off the image (image-example_off.jpg), and the occasional "on", where for the times the mouse is hovered, the required alternative image (image-example_on.jpg) is displayed.

<script type="text/javascript">        

    $(document).ready(function() {        

        $("img", this).hover(swapImageIn, swapImageOut);



        function swapImageIn(e) {

            this.src = this.src.replace("_off", "_on");

        }

        function swapImageOut (e) {

            this.src = this.src.replace("_on", "_off");

        }

    });

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>JQuery</title>

<script src="jquery.js" type="text/javascript"> </script>

<style type="text/css">

    #box{

        width: 68px;

        height: 27px;

        background: url(images/home1.gif);

        cursor: pointer;

    }

</style>



<script type="text/javascript">



$(function(){



    $('#box').hover( function(){

        $('#box').css('background', 'url(images/home2.gif)');



    });

    $('#box').mouseout( function(){

        $('#box').css('background', 'url(images/home1.gif)');



    });



});

</script>

</head>



<body>

<div id="box" onclick="location.href='index.php';"></div>

</body>

</html>

I've made something like the following code :)

It works only, when you have a second file named with _hover, for example, facebook.png and facebook_hover.png

$('#social').find('a').hover(function() {

    var target = $(this).find('img').attr('src');

    //console.log(target);

    var newTarg = target.replace('.png', '_hover.png');

    $(this).find('img').attr("src", newTarg);

}, function() {

    var target = $(this).find('img').attr('src');

    var newTarg = target.replace('_hover.png', '.png');

    $(this).find('img').attr("src", newTarg);

});

<img src="img1.jpg" data-swap="img2.jpg"/>







img = {



 init: function() {

  $('img').on('mouseover', img.swap);

  $('img').on('mouseover', img.swap);

 }, 



 swap: function() {

  var tmp = $(this).data('swap');

  $(this).attr('data-swap', $(this).attr('src'));

  $(this).attr('str', tmp);

 }

}



img.init();

Adapted from Richard Ayotte's code -
To target an img in a ul/li list (found via wrapper div class here), something like this:

$('div.navlist li').bind('mouseenter mouseleave', function() {    

    $(this).find('img').attr({ src: $(this).find('img').attr('data-alt-src'), 

    'data-alt-src':$(this).find('img').attr('src') }

);