Image Swapping based on attributes in osCommerce
Written By Gary on Feb 07 2010 · Comments (8) 
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;
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…
Comment by Gary — February 7, 2010 @ 6:16 pm
with css? one single image with the 3 colors, different position of the image at every attribute selection?
Comment by Luke — February 8, 2010 @ 9:53 pm
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
Comment by Gary — February 9, 2010 @ 9:28 am
Can you explain in more detail. I am not to familiar with css or java.
Comment by Dive — September 6, 2011 @ 9:36 pm
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.
Comment by Gary — September 28, 2011 @ 1:23 pm
Can you point me in the right direction
Comment by Dive — October 3, 2011 @ 3:34 am
@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.
Comment by Jarrod1937 — October 11, 2011 @ 1:50 pm
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.
Comment by Jarrod1937 — October 11, 2011 @ 1:52 pm