Hi am attempting to develop a selector whereby the user clicks different thumbnail images to view how a product would look in their home.

I have the following Javascript which is layering images on top of each other and changing them according to the product image thumbnails that are selected, however I am also trying to create a variable link from layer3 the accessory layer to the final product they choose.

<script>
function setAccessory(path){
document.getElementById('layer3').src = path;
}
function setAccessoryDoor(path){
document.getElementById('layer2').src = path;
}
function setAccessoryBG(path){
document.getElementById('layer1').src = path;

}
</script>


I have another script which is changing the link although it is only working as like a slide show, when the image slides (timeouts) the link changes. I need this to manually change each time a product thumbnail is clicked and layer3 image changes.

That script is;

<img id="layer3" src="images/handle-1234.jpg" name="slide" border=0 onClick="slidelink(this);return false;">

<script>
var aLinks = {
"images/accessory.jpg": "http://www.google.co.uk",
"images/accessory_a.jpg": "http://www.yahoo.co.uk",
"images/accessory_b.jpg": "http://www.facebook.com"};
var aImages = new Array();
for(iName in aLinks){
i = aImages.length;
aImages[i] = new Image();
aImages[i].src = iName;
aImages[i].reflink = aLinks[iName];
}

var step=-1;
function slideit(){
step++;
if (step>aImages.length-1) step = 0;
if (!document.images) return;
document.images.slide.src=aImages[step].src;
document.images.slide.reflink=aImages[step].reflink;
setTimeout("slideit()",3600)
}

slideit();

function slidelink(theImage){
//alert(theImage.reflink)
window.location=theImage.reflink;
}
</script>

Any help on this would be welcomed :-)

Many thanks