Product image variation

Hi guys,

I’m just posting to get your thoughts on how to handle something I’ve got to work on.

So I’m working on a product based web site. Each product has 3 options that can each have 3 different colours. For example:

Product 1 -> Option 2 -> Red

or

Product 1 -> Option 1 -> Black

…you get the idea.

Now on selecting the colour choice the product image needs to change to this colour to reflect the change. This could obviously be achieved using multiple images in a Javascript array. The only problem I have here is the sheer amount of images I would have to create, one for each possible combination. I’d be looking at 80+ images… soul destroying.

Still with me? I’m guessing I could do something in Flash that would simply layer the option on top of a base image, but then accessibility becomes an issue.

So bottom line, any ideas on updating colour options on an image without creating individual images for each option?

Thanks for any thoughts or suggestions as always!

One option:

For simplicity, lets say a product is a red circle with an inner circle coloured blue. Now let’s suppose the inner circle can have 3 different colours - blue, green, orange.

So you can get by with just 1 product image for the 3 different colours for the product’s inner circle. What you would need to do is in an image editing software application make the inner circle transparent. Then in your html, overlay the product image over a solid coloured background (blue, green or orange by default). So now when a user selects a different product colour from wherever, you can use javascript or css to change the colour of the underlying solid background to the new colour and the new colour will appear in the product’s inner circle because the inner circle is trasparent.

It might help if you post a sample product image and describe which parts of it can have different colours.

[The mods may want to move this to javascript now]

Thanks for your input webdev, I thought that may be the way forward. I first looked into this many months ago but am now only getting around to working on it. At the time someone on a forum, possibly this one, wrote some javascript for me (it’s not my strong point) based on ‘swapping’ complete images as opposed to appending changes. See code below:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Test Page</title>
	
    <script type="text/javascript">  
	// Common handler for ANY option change for ALL options in option set 1
	// The image filename is formed by concatenating the options from each group
	// The array below defines the substring used for each component.
	function onOptionSet1Changed() 
	{
		var imageOptions = 
		[
		  ['BlueFish', 'BlueFish', 'BlackFish', 'RedFish'],							// option1 (fish)
		  ['BlueCat', 'BlueCat', 'BlackCat', 'RedCat', 'GreenCat']					// option2 (cat)
		];
		
		// Get access to the all the select objects from this option set
		// Note: This could be made dynamically extensible by selecting all objects by class name if required.
		var option1 = document.getElementById("option1");
		var option2 = document.getElementById("option2");
		
		// Form the image name by concatanating the options from each select level...
		// image name will have the form: 'BlackFish-RedCat.jpg' etc.
		var selectedImage = 
		imageOptions[0][option1.selectedIndex] + '-' +									// option1 (fish)
		imageOptions[1][option2.selectedIndex];											// option2 (cat)
		
		// Change the selected image
        document.getElementById('imageSwap').src = selectedImage + '.jpg';
    }
    </script>

  </head>

  <body>
    <p>Please select your options..</p>
    <div id="builder_image">
      <img src="blueFish-BlueCat.jpg" id="imageSwap" alt="">
    </div>
    <ul class="option">
      <li class="title">Fish:</li>
      <li class="spec">
	    <!-- Notes:	-->
	    <!-- 1. class is not used but could be useful for identifying all options within this set - delete if not required	-->
	    <!-- 2. label attribute not used, option is accessed using it's 'selectedIndex' value in the common change handler	-->
	    <!-- 3. value attribute not used, option is accessed using it's 'selectedIndex' value in the common change handler	-->
	    <!-- 4. All option changes use a common handler which acceses current settings for all options in this set			-->
        <select class="OptionSet1" id="option1" onchange="onOptionSet1Changed()">
          <option selected="selected">No thanks</option>
          <option>Blue</option>
          <option>Black</option>
          <option>Red</option>
        </select>
      </li>
    </ul>
    <ul class="option">
      <li class="title">Cat:</li>
      <li class="spec">
	    <!-- Please see comments for previous select item -->
        <select class="OptionSet1" id="option2" onchange="onOptionSet1Changed()">
          <option selected="selected" >No thanks</option>
          <option>Blue</option>
          <option>Black</option>
          <option>Red</option>
          <option>Green</option>
        </select>
      </li>
    </ul>
  </body>
</html>




I’m guessing now as I need to have a ‘base’ image which is then appended by layering alpha-layered PNGs I’ll need to scrap this code and look towards jquery…


$('<img src="image.png" alt="" />').appendTo('#imageSwap'); 
}); 

Something like that perhaps. However, it still needs the functionality of the selected options.

As I say, Javascript and Jquery is really not my strong point, so if anyone could help out with this it’d be superb!

Thanks.