Scroll page back to the top

Change image on click with jQuery

Download Exercise FilesDemo

Discussion (7 comments)

  • Sangeeta

    Sangeeta on Friday, 4th May 2012

    Hey, Thanks mate

    Very easy way u introduced .... thanks again


  • Brandon

    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.


  • Sebastian Sulinski

    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 {
    	z-index: 3;


  • camdenroberts

    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.


  • Sebastian Sulinski

    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?


  • fazeelaabubacker

    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.

    thank you


  • Jennifer

    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.


  • Turuu

    Turuu on Tuesday, 3rd December 2013

    Thank you a lot .


  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Tuesday, 3rd December 2013

    Thanks for stopping by Turuu.


  • manasa

    manasa on Sunday, 11th May 2014

    please help me in geeting this concept.
    my actuall concept is that i have two manques of both genders on website. and diffrent model dresses. when on click on the dress image , the dress of the manque need to be applied to the particular gender. please help me in this.


  • Jan

    Jan on Monday, 15th September 2014

    Thank you, Sebastian, for the tutorial! It works great!
    I wonder wether I could instead of setting a 280x280px frame to the imageContainer make it flexible so that it displays the images on full screen with width=100% and a flexible height (a bit like the "background-size: cover" attribute. Is that possible? thank you for any help! Jan


  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Tuesday, 16th September 2014

    Hi Jan,
    I'm sure you can, but the problem with this is that it might cause problems with the content and click event handler, but by no means - it should work just fine.

    All you'd have to do is to bind the click event to the 'body' as oppose to the container.


Page 1 of 1
  • First
  • Previous
  • 1
  • Next
  • Last
Add a comment
Add Comment