By Sam Deering

jQuery Change Image On Hover

By 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.


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() {
	var name_element = $('#twitter-image'); 
	name_element.src = "/images/page-images/twitter-eyes-open.jpg";

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

The following goes into the HTML:

  • 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 ?

Get the latest in JavaScript, once a week, for free.