www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Help with variable links

Hybrid View

  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,709
    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 05: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 08: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,709
    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.34834 seconds
  • Memory Usage 3,064KB
  • Queries Executed 13 (?)
More Information
Template Usage (31):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (3)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (5)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)showthread_list
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (27):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./includes/functions_threadedmode.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (71):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids_threaded
  • showthread_threaded_construct_link
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates