JavaScript Alert!

To use this website and have a full access to all of the features you are required to enable javascript in your browser.
Not doing so may affect website accessibility.

Find out more on how you can enable javascript in your browser or contact us for additional support.

Change image on click with jQuery

Download Exercise Files Demo

Discussion (7 comments)

Sangeeta on Friday, 4th May 2012

Hey, Thanks mate

Very easy way u introduced .... thanks again

Reply
Brandon on Sunday, 24th June 2012

I am trying to use this on a practice website that I am working on to change the logo from one image to another, however after everything has been set up, both images are appearing in the container one below the other.

Reply

Sebastian Sulinski : @designtutorials on Sunday, 24th June 2012

Hi Brandon,
Did you check the CSS file? :

#imageContainer {
	width: 280px;
	height: 280px;
	position: relative;
	overflow: hidden;
	background: #eee;
}
#imageContainer img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#imageContainer img.active {
	z-index: 3;
}

camdenroberts on Saturday, 14th July 2012

Your script is great but I am having a strange issue.

The very last image is constantly displayed on the web page. When clicked, the next image appears but it appears on top of the last image.

I didn't make any changes to the code except for the image location.

Reply
Sebastian Sulinski : @designtutorials on Sunday, 15th July 2012

Hi camdenroberts,
Do you have it hosted on the remote server so that I could have a look at it?

Reply
fazeelaabubacker on Thursday, 23rd August 2012

easy one,sir i have one request to you,will you please introduce a tutorial where there are 6 icons(closed book), in which when we click on it ,get opened(by putting an opened image of book),as we click on another one the former one should close automatically,at the same if we have to include the link to the icon,how can we implement it.

regards
thank you

Reply
Jennifer on Tuesday, 18th September 2012

I have the same need as fazeelaabubacker -- I have a card that opens as an animated gif then I need to click it and swap out the image and replace it with a card that closes as an animated gif. This isn't happening. Thanks.

Reply