Product image variation
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
Product 1 -> Option 1 -> Black
...you get the idea.
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!
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.
It might help if you post a sample product image and describe which parts of it can have different colours.
<!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">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
// 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.
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[option1.selectedIndex] + '-' + // option1 (fish)
imageOptions[option2.selectedIndex]; // option2 (cat)
// Change the selected image
document.getElementById('imageSwap').src = selectedImage + '.jpg';
<p>Please select your options..</p>
<img src="blueFish-BlueCat.jpg" id="imageSwap" alt="">
<!-- 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>
<!-- Please see comments for previous select item -->
<select class="OptionSet1" id="option2" onchange="onOptionSet1Changed()">
<option selected="selected" >No thanks</option>
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..
Something like that perhaps. However, it still needs the functionality of the selected options.
$('<img src="image.png" alt="" />').appendTo('#imageSwap');