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:

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


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

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.