Image Swapping based on attributes in osCommerce
Written By Gary on Feb 07 2010 · Comments (3)
Buy Gary A Beer?
Buying me a "beer" helps me to keep my contributions updated and keep this blog alive - and you get a link from my homepage to your site. Cheers!
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