Posted by: Peter Andrease

Posted on: March 17, 2011 10:24 am


This tutorial will show you how to change an image placeholder into a different image using a simple select field and a small bit of Javascript.

This could be used for instance on a product page where you have a different colour select option for an item and you want the image to change to match the select box.

First have your images ready, I have a blank.gif image, which is the main image that shows on page load, then I have red.gif and blue.gif that the select box will change it to.

Now add the following javascript code to your header:

This javascript function bascially sets up two variables: image and change. It sets the image variable to the id: imageToSwap and the change variable to the id: colour. It then makes the object’s search path that has the image ID the same value as the value of the object that has the colour id.

So in the page you will need to add the following image placeholder which has the imageToSwap id and the search path is whatever your default image is:

Now all you need is to add the select box with the colour id as follows:

Now when you select either red or blue the image will change to that of its option value.

Note: You will need to add the full path if the image is not in the same directory.