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.

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


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;">

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(){
if (step>aImages.length-1) step = 0;
if (!document.images) return;


function slidelink(theImage){

Any help on this would be welcomed :-)

Many thanks