Image Swapping based on attributes in osCommerce

I was tasked by a customer to create some sort of image swapping device for a tshirt store. With some thought my idea was to use a piece of javascript based on the attribute selection which updates the image.

Then my customer decided he only wanted to upload 1 image rather than multiple images.

In the end I decided to do it in a different way, using only 1 image, can you guess how? Here’s a video;

11 Replies to “Image Swapping based on attributes in osCommerce”

  1. And to give a bit more of a clue of how this is done, here is a screenshot showing a tartan t-shirt – remember that the actual tshirt image DOES NOT CHANGE…

  2. Hi Luke – that’s a pretty good guess and is certainly one way to do it. This wy is a little different;

    the tshirt image has transparent areas (it’s a .png) and the javascript code takes the value of the selection and loads in a background image using .css

  3. Not really. It’s a case of dive in and do it yourself, or pay to have it done. It would take me half a day to explain how it works.

  4. @Dive
    There are a ton of ways to do this. It depends on the setup you have and so forth. Basically you can do a raw image swap using something like:

    Option1
    Option2

    var imagecontainer=document.getElementById(‘prodimage’);

    function typechange()
    {
    var selectedOption=document.getElementById(‘selectmenu’).value;


    code to get image file names here based on option value

    imagecontainer.src=”grabbedimagefilename.jpg”;

    }

    And simply attach the function to the dropdown menu using an onchange event or something similar. Here I attached it directly to the select menu, but you can add event handlers dynamically via javascript. Though the real trick of the implementation is:
    1.) How are you going to store the other images and associate them with the other product options/attributes?
    2.) How are you going to grab that associated data and query for the image filename when getting the option value?

    #2 is easy enough assuming you know AJAX programming. #1 you may want to think about to make sure you do it properly (scales well and is expandable). I’ve been working on a customized version of Osc for so long I don’t want to make any assumptions on your particular code base. Keep in mind you can do what Gary did and use javascript to swap the background image, which may be better for keeping a consistent layout while swapping images. Though you can do that just as well with a raw image swap too using a div of a set size and overflow set to hidden, which will keep the browser from redrawing as the image is being swapped.

  5. It seems instead of escaping my input as i initially assumed it would, it’s completely filtered out my html tags. Here is a second attempt to submit it:

    @Dive
    There are a ton of ways to do this. It depends on the setup you have and so forth. Basically you can do a raw image swap using something like:

    [left arrow]img src=”baseimage.jpg” id=”prodimage”/[right arrow]

    [left arrow]select name=”whatever” id=”selectmenu” onchange=”typechange();”[right arrow]
    [left arrow]option value=”base”[right arrow]Option1[left arrow]/option[right arrow]
    [left arrow]option value=”2″[right arrow]Option2[left arrow]/option[right arrow]
    [left arrow]/select[right arrow]

    [left arrow]script type=”text/javascript”[right arrow]
    var imagecontainer=document.getElementById(‘prodimage’);

    function typechange()
    {
    var selectedOption=document.getElementById(‘selectmenu’).value;


    code to get image file names here based on option value

    imagecontainer.src=”grabbedimagefilename.jpg”;

    }
    [left arrow]/script[right arrow]

    And simply attach the function to the dropdown menu using an onchange event or something similar. Here I attached it directly to the select menu, but you can add event handlers dynamically via javascript. Though the real trick of the implementation is:
    1.) How are you going to store the other images and associate them with the other product options/attributes?
    2.) How are you going to grab that associated data and query for the image filename when getting the option value?

    #2 is easy enough assuming you know AJAX programming. #1 you may want to think about to make sure you do it properly (scales well and is expandable). I’ve been working on a customized version of Osc for so long I don’t want to make any assumptions on your particular code base. Keep in mind you can do what Gary did and use javascript to swap the background image, which may be better for keeping a consistent layout while swapping images. Though you can do that just as well with a raw image swap too using a div of a set size and overflow set to hidden, which will keep the browser from redrawing as the image is being swapped.

    P.S. All left arrows have been replaced by [left arrow], same for all right arrows.

  6. @Jarrod1937
    I appreciate the replie Jarrod, but I am new to programming. I am trying to customize a osc template that I have. What would be the simplest way to go about this.

  7. Gary that’s pretty good. I would like to leave the main image(s) as static samples of the actual product, With another picture elsewhere on the product info page being the swatch which changes as the tartans are picked. Also need to be 2.3 compatible, thanks for the reply

Leave a Reply

Your email address will not be published. Required fields are marked *