Results 1 to 5 of 5

Thread: How can I make multiple image selection boxes reset when navigating away?

  1. #1
    Join Date
    Sep 2013
    Location
    Wales UK
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How can I make multiple image selection boxes reset when navigating away?

    Hi There
    I am a novice who is winging it with some "image selection box" code that I got from Javascript Kit.com. In an attempt to improve my customer eBay experience I have created a page with multiple copies of the code set in a html table which gives the customer a way of viewing a multitude of t-shirt colour options. My way of presenting this info is probably not the best way, however I am limited by my lack of know-how when it comes to coding and also by eBay code restrictions.
    The problem is as follows, if you change some of the images via the selection boxes and then navigate away from the page (via browser buttons not by changing tabs) and then back, all the images have reset to their default but the selection boxes are still set to how they were left. The result being that when you then make a new selection within one box, all the ones that were left change.
    I would be very grateful if anyone could help me resolve this situation or perhaps suggest an alternative way to set up the page.
    Thank you

    here is a link to the page for you to check Identitees Colour Examples

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    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>
    <script type="text/javascript">
    /*<![CDATA[*/
    function showimage(s){
     var i=s,days=1; // 1 = the number of days to restore the index/image
     while (i&&i.nodeName.toUpperCase()!='TD'){
      i=i.parentNode;
     }
     i=i.getElementsByTagName('IMG');
     if (i[0]){
      i[0].src=s.value;
      document.cookie=s.form.name+'='+s.selectedIndex+';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
     }
    }
    
    function cookie(nme){
     var re=new RegExp(nme+'=[^;]+','i');
     if (document.cookie.match(re)){
      return document.cookie.match(re)[0].split("=")[1];
     }
     return null;
    }
    
    function getcookie(nme){
     var s=document.body.getElementsByTagName('SELECT'),z0=0;
     for (;z0<s.length;z0++){
      if (cookie(s[z0].form.name)){
       s[z0].selectedIndex=cookie(s[z0].form.name);
       showimage(s[z0]);
      }
     }
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <table width="100%" border="0">
       <tr>
        <td width="16.6%">
        <form name="mygallery01">
        <center>
    <select name="picture" size="1" onchange="showimage(this)"><!-- note 'this' -->
    <option selected value="https://lh5.googleusercontent.com/-9l8slHW1JDY/UL96swieVNI/AAAAAAAAFVs/hesG3M6fY8w/s288/Identitees_Colour_Sample_0018.jpg">White on Black</option>
    <option value="https://lh3.googleusercontent.com/-68iJ716ZhJY/UL96r6DggRI/AAAAAAAAFVs/XxGMDrTUaQI/s288/Identitees_Colour_Sample_0017.jpg">Lemon Yellow on Black</option>
    <option value="https://lh6.googleusercontent.com/-dHu7VnxUekg/UL96rDA6qII/AAAAAAAAFVs/UYfyFjDc1tU/s288/Identitees_Colour_Sample_0016.jpg">Off White on Black</option>
    <option value="https://lh6.googleusercontent.com/-FqALyubwTaI/UL96qLLuAiI/AAAAAAAAFVs/2t5oY8qcqXY/s288/Identitees_Colour_Sample_0015.jpg">Golden Yellow on Black</option>
    <option value="https://lh3.googleusercontent.com/-nGaOZ--JJ-A/UL96o0mASfI/AAAAAAAAFVs/el_-Xh9AZr8/s288/Identitees_Colour_Sample_0014.jpg">Grey on Black</option>
    <option value="https://lh6.googleusercontent.com/-2epc4XU-yj4/UL96oIyW6rI/AAAAAAAAFVs/mqFJtR6U7Xg/s288/Identitees_Colour_Sample_0013.jpg">Turquoise on Black</option>
    <option value="https://lh5.googleusercontent.com/-yyusZgiWERM/UL96nAnRWsI/AAAAAAAAFVs/T2hlz7tsnaY/s288/Identitees_Colour_Sample_0012.jpg">Bright Green on Black</option>
    <option value="https://lh4.googleusercontent.com/-Tnn45ugQRXw/UL96mJgYJlI/AAAAAAAAFVs/Z9W-SCSL9bs/s400/Identitees_Colour_Sample_0011.jpg">Beige on Black</option>
    <option value="https://lh5.googleusercontent.com/-6VQ1haeuT_s/UL96lGL9zMI/AAAAAAAAFVs/_VybPmcGWnc/s288/Identitees_Colour_Sample_0010.jpg">Orange on Black</option>
    <option value="https://lh5.googleusercontent.com/--knbKclZPNE/UL96kLHZ59I/AAAAAAAAFVs/eDAscDRuZMw/s288/Identitees_Colour_Sample_0009.jpg">Light Red on Black</option>
    <option value="https://lh4.googleusercontent.com/-6hNk8sQ-Lp4/UL96jDDkI1I/AAAAAAAAFVs/Bp7xBmFLHkk/s288/Identitees_Colour_Sample_0008.jpg">Magenta on Black</option>
    <option value="https://lh3.googleusercontent.com/-jPmimSkUrOE/UL96iO7nL0I/AAAAAAAAFVs/TvdoxfhlwNA/s288/Identitees_Colour_Sample_0007.jpg">Mild Green on Black</option>
    <option value="https://lh3.googleusercontent.com/-UKKIYDkzDHA/UL96hECr73I/AAAAAAAAFVs/rSXqHyijX2c/s288/Identitees_Colour_Sample_0006.jpg">Dark Red on Black</option>
    <option value="https://lh4.googleusercontent.com/-Hr7gcRQGX-s/UL96gLesjBI/AAAAAAAAFVs/iFlWsMsIBUU/s288/Identitees_Colour_Sample_0005.jpg">Brown on Black</option>
    <option value="https://lh6.googleusercontent.com/-tUIqv1s8Vxs/UL96fUuJuOI/AAAAAAAAFVs/6hY6E_De4pU/s288/Identitees_Colour_Sample_0004.jpg">Sky Blue on Black</option>
    <option value="https://lh4.googleusercontent.com/-7On0Uh0kRD4/UL96elGejlI/AAAAAAAAFVs/tkLAt-eHlHE/s288/Identitees_Colour_Sample_0003.jpg">Purple on Black</option>
    <option value="https://lh3.googleusercontent.com/-UfUVqOtbRgc/UL96d-NwgGI/AAAAAAAAFVs/qG_7qoBFbko/s288/Identitees_Colour_Sample_0002.jpg">Mild Blue on Black</option>
    <option value="https://lh3.googleusercontent.com/-5qLLeOGjHEE/UL96c9BEL6I/AAAAAAAAFVs/O0pAmOorpRw/s400/Identitees_Colour_Sample_0001.jpg">Navy Blue on Black</option>
    </select>
    </center>
    </form>
    <p align="center"><img src="https://lh5.googleusercontent.com/-9l8slHW1JDY/UL96swieVNI/AAAAAAAAFVs/hesG3M6fY8w/s288/Identitees_Colour_Sample_0018.jpg" name="pictures01" width="288" height="328">
       </td>
        <td width="16.6%"><form name="mygallery02"><center>
    <select name="picture" size="1" onchange="showimage(this)">
    <option selected value="https://lh3.googleusercontent.com/-G4L6jSkKjh4/UL9685IEVTI/AAAAAAAAFVs/qVRdWvNIBcQ/s288/Identitees_Colour_Sample_0035.jpg">White on Deep Navy</option>
    <option value="https://lh4.googleusercontent.com/-yAO9zcxakTo/UL968IwYo0I/AAAAAAAAFVs/OQVm3Dx4VDM/s288/Identitees_Colour_Sample_0034.jpg">Lemon Yellow on Deep Navy</option>
    <option value="https://lh3.googleusercontent.com/-qPlkL59S9-4/UL967DdbvkI/AAAAAAAAFVs/KmYvIy93qgQ/s288/Identitees_Colour_Sample_0033.jpg">Off White on Deep Navy</option>
    <option value="https://lh3.googleusercontent.com/-ae8KTyIXv4k/UL966OGXUqI/AAAAAAAAFVs/h1bzFILqLB0/s288/Identitees_Colour_Sample_0032.jpg">Golden Yellow on Deep Navy</option>
    <option value="https://lh3.googleusercontent.com/-dHrk4AxY-LQ/UL965DAnZMI/AAAAAAAAFVs/fWY0z6nXtZc/s288/Identitees_Colour_Sample_0031.jpg">Grey on Deep Navy/option</option>
    <option value="https://lh4.googleusercontent.com/-M_wuVhmR998/UL964JlUcqI/AAAAAAAAFVs/YPK3n2TnFho/s288/Identitees_Colour_Sample_0030.jpg">Turquoise on Deep Navy</option>
    <option value="https://lh6.googleusercontent.com/-O0TkdE8azcA/UL963XAhpoI/AAAAAAAAFVs/wmiTN36dltU/s288/Identitees_Colour_Sample_0029.jpg">Bright Green on Deep Navye</option>
    <option value="https://lh5.googleusercontent.com/-cf6uppsPH4E/UL962C8F4_I/AAAAAAAAFVs/nxHd-XmW5mo/s288/Identitees_Colour_Sample_0028.jpg">Beige on Deep Navy</option>
    <option value="https://lh5.googleusercontent.com/-mqruueUPth4/UL96046-x-I/AAAAAAAAFVs/-rW_LoAQ7XY/s288/Identitees_Colour_Sample_0027.jpg">Orange on Deep Navy</option>
    <option value="https://lh3.googleusercontent.com/-4J4guYsUcg0/UL960M63AoI/AAAAAAAAFVs/XMpeV8WC1iU/s288/Identitees_Colour_Sample_0026.jpg">Light Red on Deep Navy</option>
    <option value="https://lh3.googleusercontent.com/-sgQ5XRxiAjY/UL96zIzDmlI/AAAAAAAAFVs/IiQ9HzJbw40/s288/Identitees_Colour_Sample_0025.jpg">Magenta on Deep Navy</option>
    <option value="https://lh3.googleusercontent.com/-q22GNq4I0Fw/UL96yK7PrYI/AAAAAAAAFVs/KcLKh5rLjYA/s288/Identitees_Colour_Sample_0024.jpg">Mild Green on Deep Navy</option>
    <option value="https://lh3.googleusercontent.com/-4J4guYsUcg0/UL960M63AoI/AAAAAAAAFVs/XMpeV8WC1iU/s288/Identitees_Colour_Sample_0026.jpg">Dark Red on Deep Navy</option>
    <option value="https://lh5.googleusercontent.com/-xywpeDVUok0/UL96waR8FNI/AAAAAAAAFVs/L9AMPxGTmPA/s288/Identitees_Colour_Sample_0022.jpg">Brown Print on Deep Navy</option>
    <option value="https://lh4.googleusercontent.com/-cWcPT7O-bqM/UL96vsMCnXI/AAAAAAAAFVs/tOPjS3_N1Us/s288/Identitees_Colour_Sample_0021.jpg">Sky Blue on Deep Navy</option>
    <option value="https://lh4.googleusercontent.com/-DpMZlEpMccc/UL96uh0qliI/AAAAAAAAFVs/ysXBTUcVFzQ/s288/Identitees_Colour_Sample_0020.jpg">Purple on Deep Navy</option>
    <option value="https://lh4.googleusercontent.com/-RGVOLCXPenI/UL96tiymFWI/AAAAAAAAFVs/DpPT-_m6tMU/s288/Identitees_Colour_Sample_0019.jpg">Mild Blue on Deep Navy</option>
    </select>
    </center>
    </form>
    <p align="center"><img src="https://lh3.googleusercontent.com/-G4L6jSkKjh4/UL9685IEVTI/AAAAAAAAFVs/qVRdWvNIBcQ/s288/Identitees_Colour_Sample_0035.jpg" name="pictures02" width="288" height="328">
       </td>
    </tr>
    </table>
    
    
    <!-- position just befor the </BODY> tag -->
    <script type="text/javascript">
    
    getcookie('picture');
    
    </script>
    </body>
    
    </html>
    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
    Sep 2013
    Location
    Wales UK
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Thwartded by ebay restrictions (yet again)

    Hi Vic
    Thank you very much for that quick response and that code. I am grateful and happy that someone endeavoured to help me However, as happy as I was after receiving your response and code especially as I found it worked when I tested it from Dreamweaver, when I copied it to ebay it was rejected and I received the message "You entered some HTML or other code in Text Section that is not allowed" What can I say? I need my own website, I know...I would be happy and grateful if I was helped further but you are absolutely welcome not to, but if you do here are some of the ebay guidelines.



    You can't use HTML or JavaScript that:

    • Calls remote scripts and pages automatically, such as JavaScript 'includes' or 'iframes'.
    • Changes registry entries or otherwise writes to another person's computer hard drive.
    • Creates automatic pop-ups except for links that open in a new window when clicked on.
    • Is used to drop or read a cookie on any eBay page.
    • Loads any binary program on another person's computer automatically, except for Flash content.
    • Launches a song or video when a listing is opened.
    • Overwrites any area in the listing outside of the item description area.
    • Manipulates areas outside the listing description, including changing fonts, colours, and backgrounds in areas such as eBay headers and footers.
    • Posts to scripts on eBay automatically.
    • Redirects the user from eBay to another web page, such as using the 'replace' script.




    I did notice the word "cookie" in your script, perhaps that's the reason it has been rejected by ebay. Perhaps I might have to accept that it is not possible to do what I want to do with the ebay restrictions being what they are, perhaps I need an alternative solution but as I am very green, I don't even really know what is possible with Javascript. One idea I do have is that perhaps I could have a row of selectable thumbnails, each one representing a particular garment colour, with only one selection box positioned below for the print colour options. When a thumbnail is selected the selection box list could be refreshed and populated with the image links appropriate to that particular thumbnail selected...Could that be done? I mean is that possible with Javascript or am I pushing it?...any further help or suggestions would be appreciated.
    Thanks again for your help so far...cheers

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    this will no solve your original problem but

    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>
    <style type="text/css">
    /*<![CDATA[*/
    .selected {
      border:solid red 1px;
    }
    
    /*]]>*/
    </style><script type="text/javascript">
    /*<![CDATA[*/
    var Set1=[
     'select print for set 1', // select option 0
    // field 0 = the image src
    // field 1 = the select option value
    // field 2 = the select option text
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','Set 1 Print 1 value','Set 1 Print 1'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','Set 1 Print 2','Set 1 Print 2'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Set 1 Print 3','Set 1 Print 3'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','Set 1 Print 4','Set 1 Print 4']
    ];
    
    var Set2=[
     'select print for set 2',  // select option 0
    // field 0 = the image src
    // field 1 = the select option value
    // field 2 = the select option text
     ['http://www.vicsjavascripts.org.uk/StdImages/1.gif','Set 2 Print 1 value','Set 2 Print 1'],
     ['http://www.vicsjavascripts.org.uk/StdImages/2.gif','Set 2 Print 2','Set 2 Print 2'],
     ['http://www.vicsjavascripts.org.uk/StdImages/3.gif','Set 2 Print 3','Set 2 Print 3'],
     ['http://www.vicsjavascripts.org.uk/StdImages/4.gif','Set 2 Print 4','Set 2 Print 4']
    ];
    
    function SelectSet(id,ary,s){
     var img=document.getElementById(id),s=document.getElementById(s),z0=0;
     if (img&&ary instanceof Array&&s&&s.nodeName.toUpperCase()=='SELECT'){
      if (SelectSet.img){
       SelectSet.img.className=SelectSet.img.className.replace(' selected','');
      }
      SelectSet.img=img;
      SelectSet.ary=ary;
      img.className+=' selected';
      s.options.length=1;
      s.options[0].text=ary[0];
      for (;z0<ary.length;z0++){
       if (ary[z0]&&ary[z0][0]&&ary[z0][1]){
        s.options[z0+1]=new Option(ary[z0][2]||ary[z0][1],ary[z0][1]);
       }
      }
     }
    }
    
    function SelectPrint(s){
     if (SelectSet.img&&SelectSet.ary&&SelectSet.ary[s.selectedIndex]){
      SelectSet.img.src=SelectSet.ary[s.selectedIndex][0];
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <img id="i1" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" onclick="SelectSet('i1',Set1,'select')" alt="img" width="200" height="150" />
    <img id="i2" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" onclick="SelectSet('i2',Set2,'select')" alt="img" width="200" height="150" />
    <br />
    <select id="select" onchange="SelectPrint(this);">
     <option>Select An Image</option>
    </select>
    
    </body>
    
    </html>
    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/

  5. #5
    Join Date
    Sep 2013
    Location
    Wales UK
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Vic
    Thanks for that new code, that might work for me. Although when I tried it in ebay, again not accepted, and so I decided to go through it bit by bit to find what the offensive code was, adding the code a bit at a time, strangely it accepted most of the code apart from the small bit I've highlighted in red. So I just left that bit out and surprisingly it still works although there has been a few little glitches. I'm going to try the same procedure with the first bit of code you give me, you never know. Again Thanks for helping me I'll let you know how I get on. Cheers
    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>
    <style type="text/css">
    /*<![CDATA[*/
    .selected {
      border:solid red 1px;
    }
    
    /*]]>*/
    </style><script type="text/javascript">
    /*<![CDATA[*/
    var Set1=[
     'select print for set 1', // select option 0
    // field 0 = the image src
    // field 1 = the select option value
    // field 2 = the select option text
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','Set 1 Print 1 value','Set 1 Print 1'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','Set 1 Print 2','Set 1 Print 2'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Set 1 Print 3','Set 1 Print 3'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','Set 1 Print 4','Set 1 Print 4']
    ];
    
    var Set2=[
     'select print for set 2',  // select option 0
    // field 0 = the image src
    // field 1 = the select option value
    // field 2 = the select option text
     ['http://www.vicsjavascripts.org.uk/StdImages/1.gif','Set 2 Print 1 value','Set 2 Print 1'],
     ['http://www.vicsjavascripts.org.uk/StdImages/2.gif','Set 2 Print 2','Set 2 Print 2'],
     ['http://www.vicsjavascripts.org.uk/StdImages/3.gif','Set 2 Print 3','Set 2 Print 3'],
     ['http://www.vicsjavascripts.org.uk/StdImages/4.gif','Set 2 Print 4','Set 2 Print 4']
    ];
    
    function SelectSet(id,ary,s){
     var img=document.getElementById(id),s=document.getElementById(s),z0=0;
     if (img&&ary instanceof Array&&s&&s.nodeName.toUpperCase()=='SELECT'){
      if (SelectSet.img){
       SelectSet.img.className=SelectSet.img.className.replace(' selected','');
      }
      SelectSet.img=img;
      SelectSet.ary=ary;
      img.className+=' selected';
      s.options.length=1;
      s.options[0].text=ary[0];
      for (;z0<ary.length;z0++){
       if (ary[z0]&&ary[z0][0]&&ary[z0][1]){
        s.options[z0+1]=new Option(ary[z0][2]||ary[z0][1],ary[z0][1]);
       }
      }
     }
    }
    
    function SelectPrint(s){
     if (SelectSet.img&&SelectSet.ary&&SelectSet.ary[s.selectedIndex]){
      SelectSet.img.src=SelectSet.ary[s.selectedIndex][0];
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <img id="i1" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" onclick="SelectSet('i1',Set1,'select')" alt="img" width="200" height="150" />
    <img id="i2" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" onclick="SelectSet('i2',Set2,'select')" alt="img" width="200" height="150" />
    <br />
    <select id="select" onchange="SelectPrint(this);">
     <option>Select An Image</option>
    </select>
    
    </body>
    Last edited by Beverleyh; 10-01-2013 at 12:43 PM. Reason: formatting

Similar Threads

  1. Replies: 0
    Last Post: 03-05-2013, 02:15 AM
  2. Image Power Zoomer: how to make it work on multiple images?
    By Littlefoot in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-05-2012, 09:39 PM
  3. Replies: 1
    Last Post: 07-19-2007, 08:18 PM
  4. Pass Multiple Values - Reset/Clear Textarea
    By curb in forum JavaScript
    Replies: 0
    Last Post: 06-20-2006, 11:03 PM
  5. Replies: 1
    Last Post: 01-06-2005, 09:40 PM

Bookmarks

Posting Permissions

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