Treehouse: Grow your CSS skills. Land your dream job.

Replace image without page reload??

  • # January 7, 2012 at 12:08 pm

    Hey everyone

    I’m guessing that what I want to do will use either javascript or jquery, I am building an online catalogue for a company. Some of the products that they sell have different variations (i.e. colour, shape, size etc etc) now in the page that presents the item to the visitor I am showing an image of the item. What I would like to do is have a series of drop down menu’s that have the different versions of the product listed and when someone selects let say a different colour I would like the image to change to a different one showing the colour that they have selected but without a full page refresh. How could I go about doing this baring in mind that at the maximum their could be 3 or 4 drop down menu’s effecting the image displayed. If it affects it at all, all the details of the products including the filenames of the images are stored in a mySQL database.

    Thank you for your time people.


    # January 7, 2012 at 6:23 pm

    Yes, it can be done in JS. Here’s how to do it with the onclick event:

    I’m not sure how to do it with dropdowns, but I’m sure someone here is.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.