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

**Lee 337** · 09-29-2013, 01:23 PM

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

**vwphillips** · 09-29-2013, 03:01 PM

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>

**Lee 337** · 09-30-2013, 12:07 AM

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

**vwphillips** · 09-30-2013, 10:29 AM

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>

**Lee 337** · 10-01-2013, 12:35 PM

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>