[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:
Code:
<!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..
Code:
$('<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.
Reply With Quote
Bookmarks