jQuery Change Image On Hover

Sam Deering

A really cool feature of jQuery is the ability to change an image dynamically, like when you move the mouse over a certain area of the screen a picture will change.

jquery-change-image-on-hover

How you do it: You reference the image src property and change it via 2 functions. The first function changes the image and the second changes it back. Then in the HTML we add an event to the area which the mouse will trigger the functions (note these triggers could also be added to the JavaScript). Simple as that. See Live Demo

jQuery change image dynamically

//this code sits outside the (document).ready function

function twittereyesopen() {
	//alert("open");
	var name_element = $('#twitter-image'); 
	name_element.src = "/images/page-images/twitter-eyes-open.jpg";
}

function twittereyesclosed() {
	//alert("closed");
	var name_element = $('#twitter-image');
	name_element.src = "/images/page-images/twitter-eyes-closed.jpg";
}

The following goes into the HTML:

<div id="footer" onmouseover="javascript:twittereyesopen()" 
onmouseout="javascript:twittereyesclosed()">
<!--content (may also contain image)-->
</div>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • jonny

    thank you

  • Virneto

    This is nice. Cheers to you!!!

  • Jelle Peters

    I don’t know if you’re aware of this but, the demo changes the image when you go over the footer. Wouldn’t it be better if it only changed when you hover of that paticular ?