JavaScript
Article
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.

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

--ADVERTISEMENT--

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:

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account