About Club osCommerce

Showcasing osCommerce…the good, the bad and the ugly!

StumbleUpon It! DIGG It!

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;

3 Comments

  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…

    Comment by Gary — February 7, 2010 @ 6:16 pm


  2. 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


  3. 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


Leave a comment

RSS feed for comments on this post · TrackBack URL

Hot 100 osCommerce Shops

View the osCommerce HOT 100These are the best looking, most exceptional osCommerce Stores as voted for by you.

New to osCommerce - get inspiration from these beautiful shops. Reckon your site has what it takes to become a member of the HOT 100? Submit it!