www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Help with variable links

  1. #1
    Join Date
    Jul 2014
    Posts
    3

    resolved [RESOLVED] Help with variable links

    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

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <a><img id="layer3" src="images/handle-1234.jpg" name="slide" border=0 onmouseout="slideit();" onmouseover="clearTimeout(slideit.to);"></a>
    
    <img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" width="50" height="50" onclick="GoTo(0);"/>
    <img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" width="50" height="50" onclick="GoTo(1);"/>
    <img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" width="50" height="50" onclick="GoTo(2);"/>
    
    
    <script>
    var aLinks = {
    "http://www.vicsjavascripts.org/StdImages/Egypt5.jpg": "http://www.google.co.uk",
    "http://www.vicsjavascripts.org/StdImages/Egypt6.jpg": "http://www.yahoo.co.uk",
    "http://www.vicsjavascripts.org/StdImages/Egypt7.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(n){
     var img=document.getElementById('layer3');
     clearTimeout(slideit.to);
     aImages[n]?step=n:step++;
     if (img){
      img.parentNode.removeAttribute('href');
      if (step>aImages.length-1) step = 0;
      img.src=aImages[step].src;
      img.parentNode.href=aImages[step].reflink;
      slideit.to=setTimeout("slideit()",3600);
     }
    }
    
    function GoTo(n){
     slideit(n);
    }
    
    slideit();
    
    </script>
    
    </body>
    
    </html>
    Last edited by vwphillips; 07-15-2014 at 06:40 AM.
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2014
    Posts
    3
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <a><img id="layer3" src="images/handle-1234.jpg" name="slide" border=0 onmouseout="slideit();" onmouseover="clearTimeout(slideit.to);"></a>
    
    <img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" width="50" height="50" onclick="GoTo(0);"/>
    <img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" width="50" height="50" onclick="GoTo(1);"/>
    <img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" width="50" height="50" onclick="GoTo(2);"/>
    
    
    <script>
    var aLinks = {
    "http://www.vicsjavascripts.org/StdImages/Egypt5.jpg": "http://www.google.co.uk",
    "http://www.vicsjavascripts.org/StdImages/Egypt6.jpg": "http://www.yahoo.co.uk",
    "http://www.vicsjavascripts.org/StdImages/Egypt7.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(n){
     var img=document.getElementById('layer3');
     clearTimeout(slideit.to);
     aImages[n]?step=n:step++;
     if (img){
      img.parentNode.removeAttribute('href');
      if (step>aImages.length-1) step = 0;
      img.src=aImages[step].src;
      img.parentNode.href=aImages[step].reflink;
      slideit.to=setTimeout("slideit()",3600);
     }
    }
    
    function GoTo(n){
     slideit(n);
    }
    
    slideit();
    
    </script>
    
    </body>
    
    </html>
    Many thanks for your reply and code, however I haven't managed to get this working with the existing layered images javascript.

    Link removed at OP's request

    I may not have explained it very well previously but each handle selected needs to show as layer3 on top of the other 2 layers and click through to a variable url (will be the product url)

    Hoping you can help again.

    Many thanks
    Last edited by SuperSparks; 07-16-2014 at 09:24 AM. Reason: Link removed at OP's request

  4. #4
    Join Date
    Jul 2014
    Posts
    3
    Since resolved this - many thanks

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    this works for me

    I nave removed redundent functions ans one link url and slide show timing

    Code:
    <style type="text/css">
    img
    {
        position:absolute;
        top: 0px;
        left: 0px;
    }
    #layer1
    {
       z-index: 10;
    }
    #layer2
    {
    z-index: 20;
    }
    
    #layer3
    {
    z-index: 30;
    }
    
    #handle
    { position:absolute;
        top: 800px;
        left: 10px;
    	}
    
    #handle1
    { position:absolute;
        top: 800px;
        left: 100px;
    	}
    
    	#handle2
    { position:absolute;
        top: 800px;
        left: 190px;
    	}
    
    		#handle3
    { position:absolute;
        top: 800px;
        left: 280px;
    	}
    
    		#handle4
    { position:absolute;
        top: 800px;
        left: 370px;
    	}
    
    		#handle5
    { position:absolute;
        top: 800px;
        left: 460px;
    	}
    
    #door
    { position:absolute;
        top: 720px;
        left: 10px;
    	}
    
    #door1
    { position:absolute;
        top: 720px;
        left: 130px;
    }
    #door2
    { position:absolute;
        top: 720px;
        left: 250px;
    }
    
    #door3
    { position:absolute;
        top: 720px;
        left: 370px;
    }
    
    #door4
    { position:absolute;
        top: 720px;
        left: 490px;
    }
    
    #door5
    { position:absolute;
        top: 720px;
        left: 610px;
    }
    
    #bg
    { position:absolute;
        top: 620px;
        left: 10px;
    	}
    
    #bg1
    { position:absolute;
        top: 620px;
        left: 150px;
    }
    #bg2
    { position:absolute;
        top: 620px;
        left: 290px;
    }
    </style>
    
    
    <img id="layer1" src="http://www.handleking.co.uk/select_images/background-liv1.png"/>
    <img id="layer2" src="http://www.handleking.co.uk/select_images/door-wht1.png"/>
    <a><img id="layer3" src="http://www.handleking.co.uk/select_images/handle-H750022D.png" name="slide" border=0 onmouseover="clearTimeout(slideit.to);"></a>
    
    <script>
    var aLinks = {
    "http://www.handleking.co.uk/select_images/handle-H750022D.png": "http://www.webdeveloper.com/",
    "http://www.handleking.co.uk/select_images/handle-H730033D.png": "http://www.handleking.co.uk/designer-door-handles-with-straight-lever-on-bevelled-rose-h730033d",
    "http://www.handleking.co.uk/select_images/handle-H730050P.png": "http://www.handleking.co.uk/designer-door-handles-on-slimline-round-rose-h730050p",
    "http://www.handleking.co.uk/select_images/handle-H750040D.png": "http://www.handleking.co.uk/designer-chrome-door-handles-on-rose-with-duo-finish-h750040d",
    "http://www.handleking.co.uk/select_images/handle-H750041D.png": "http://www.handleking.co.uk/chrome-door-handles-on-rose-with-duo-finish-h750041d",
    "http://www.handleking.co.uk/select_images/handle-H750042D.png": "http://www.handleking.co.uk/chrome-interior-door-handles-on-rose-with-duo-finish-h750042d"
    };
    
    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(n){
     var img=document.getElementById('layer3');
     clearTimeout(slideit.to);
     aImages[n]?step=n:step++;
     if (img){
      img.parentNode.removeAttribute('href');
      if (step>aImages.length-1) step = 0;
      img.src=aImages[step].src;
      img.parentNode.href=aImages[step].reflink;
      !aImages[n]?slideit.to=setTimeout("slideit()",1600):null;
     }
    }
    
    function GoTo(n){
     slideit(n);
    }
    
    slideit();
    
    </script>
    
    <!-- Handles -->
    <img id="handle" src="http://www.handleking.co.uk/select_images/handle-H750022D.png" style=" width:120px" onClick="GoTo(0);"/>
    
    <img id="handle1" src="http://www.handleking.co.uk/select_images/handle-H730033D.png" style=" width:120px" onClick="GoTo(1);"/>
    
    <img id="handle2" src="http://www.handleking.co.uk/select_images/handle-H730050P.png" style=" width:120px" onClick="GoTo(2);"/>
    
    <img id="handle3" src="http://www.handleking.co.uk/select_images/handle-H750040D.png" style=" width:120px" onClick="GoTo(3);"/>
    
    <img id="handle4" src="http://www.handleking.co.uk/select_images/handle-H750041D.png" style=" width:120px" onClick="GoTo(4);"/>
    
    <img id="handle5" src="http://www.handleking.co.uk/select_images/handle-H750042D.png" style=" width:120px" onClick="GoTo(5);"/>
    
    <!-- Doors -->
    <img id="door" src="http://www.handleking.co.uk/select_images/door-wht1.png" style=" width:120px" onClick="setAccessoryDoor('http://www.handleking.co.uk/select_images/door-wht1.png');"/>
    
    <img id="door1" src="http://www.handleking.co.uk/select_images/door-black1.png" style=" width:120px" onClick="setAccessoryDoor('http://www.handleking.co.uk/select_images/door-black1.png');"/>
    
    <img id="door2" src="http://www.handleking.co.uk/select_images/door-beige1.png" style=" width:120px" onClick="setAccessoryDoor('http://www.handleking.co.uk/select_images/door-beige1.png');"/>
    
    <img id="door3" src="http://www.handleking.co.uk/select_images/door-wood1.png" style=" width:120px" onClick="setAccessoryDoor('http://www.handleking.co.uk/select_images/door-wood1.png');"/>
    
    <img id="door4" src="http://www.handleking.co.uk/select_images/door-wood2.png" style=" width:120px" onClick="setAccessoryDoor('http://www.handleking.co.uk/select_images/door-wood2.png');"/>
    
    <img id="door5" src="http://www.handleking.co.uk/select_images/door-wood3.png" style=" width:120px" onClick="setAccessoryDoor('http://www.handleking.co.uk/select_images/door-wood3.png');"/>
    
    <!-- Background -->
    <img id="bg" src="http://www.handleking.co.uk/select_images/living-room1.png" onClick="setAccessoryBG('http://www.handleking.co.uk/select_images/background-liv1.png');"/>
    
    <img id="bg1" src="http://www.handleking.co.uk/select_images/bedroom-1.png" onClick="setAccessoryBG('http://www.handleking.co.uk/select_images/background-bedroom1.png');"/>
    
    <img id="bg2" src="http://www.handleking.co.uk/select_images/kitchen-1.png" onClick="setAccessoryBG('http://www.handleking.co.uk/select_images/background-kitch1.png');"/>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles