Change image with JavaScript (or jQuery)

abstract

One of the most asked questions by JavaScript beginners is how to change image on the html page when mouse pointer enters the image or maybe some other object on the page. This is called mouseover.
Here is a little tutorial that covers most of the relevant cases.

compatible

All modern browsers

Let us start with an example page where an img tag is located:

<html>
<head>
<script type="text/javascript">

function showHover(img) {
   if(img) {
        img.src = '/i/ex_hover.gif';
   }
}
function showNormal(img) {
   if(img) {
        img.src = '/i/ex.gif';
   }
}
function init() {
    /* here we will place our code */
    var ex1 = document.getElementById('ex1');
    if(ex1.addEventListener) {//trying the standard way
    	ex1.addEventListener('mouseover', function(){showHover(ex1);}, false);
	ex1.addEventListener('mouseout', function(){showNormal(ex1);}, false);
    } else {//in case it's an InternetExplorer
	ex1.attachEvent('mouseover', function(){showHover(ex1);});
	ex1.attachEvent('mouseout', function(){showNormal(ex1);});
    }

    var ex2 = document.getElementById('ex2');
    var hlink = document.getElementById('hlink');
    if(hlink.addEventListener) {
	hlink.addEventListener('mouseover', function(){showHover(ex2);}, false);
        hlink.addEventListener('mouseout', function(){showNormal(ex2);}, false);
    } else {
	hlink.attachEvent('mouseover', function(){showHover(ex2);});
        hlink.attachEvent('mouseout', function(){showNormal(ex2);});
    }
}

window.onload = init;

</script> 
</head>
<body>
<h1>Example1</h1><br/>
<img id='ex1' src="/i/ex.gif" />
<hr/>

<h1>Example2</h1><br/>
<img id='ex2' src="/i/ex.gif" /> <a href="#" id="hlink">hover this link</a>

</body>
</html>

That's a lot of code! :) All that dancing around IE, long method names...

See example page here.

Now lets have a look on a jQuery version of the same page.

<html>
<head>
<!-- loading jQuery from Google storage -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

function showHover(img) {
   if(img) {
        img.src = '/i/ex_hover.gif';
   }
}
function showNormal(img) {
   if(img) {
        img.src = '/i/ex.gif';
   }
}

$(document).ready(function() {
    $('#ex1').mouseover(function(){
	showHover(this);
    }).mouseout(function(){
	showNormal(this);
    });

    $('#hlink').mouseover(function(){
	showHover($('#ex2').get()[0]);
    }).mouseout(function(){
	showNormal($('#ex2').get()[0]);
    });
});

</script> 
</head>
<body>
<h1>Example1</h1><br/>
<img id='ex1' src="/i/ex.gif" />
<hr/>

<h1>Example2</h1><br/>
<img id='ex2' src="/i/ex.gif" /> <a href="#" id="hlink">hover this link</a>

</body>
</html>

Same functionality but much less code with jQuery. See example page here.

However there's another case that can be covered with CSS only.
Setting and swapping background images for any html object can be done using the :hover selector.
Here is an example:

selector {
    background-image: url(/images/image.jpg);
}

selector:hover {
    background-image: url(/images/image_hover.jpg);
}

tested

Chrome 5

Firefox 3.5.6