...

View Full Version : Resolved Several drop down boxes



chauptman
10-07-2011, 02:38 AM
Hello, I have a drop down box, which display an images. It is also saved through a cookie on what option you leave it on. Is there a way you can make it so there are several drop downs on the same page that will also display images corresponding to the option chosen?

Here's a live example: www.cirula.com/options

here is my coding


<script language="javascript">

function linkrotate(which){
var mylinks=new Array()
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0]="http://www.google.com"
mylinks[1]="http://www.ebay.com"
mylinks[2]="http://www.yahoo.com"

window.location=mylinks[which]
}


function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
</script>


</head>
<body onLoad="setDefaultValues()">
<div align="center">

<form name="mygallery">
<p><select name="picture" onChange="showimage(); setCookie(this.name,this.selectedIndex)" size="1">
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
</form>
<p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="http://www.cirula.com/images/google.png" name="pictures" width="150"
height="150" border=0></a>

chump2877
10-07-2011, 04:25 AM
I don't understand: You clearly have mastered how to implement this for a single drop down menu (per the example link you posted), so what prevents you from doing this multiple times on the same page? Is there a specific piece of code that has you stumped, that specifically pertains to replicating this functionality on the same page?

Out of curiosity, did you actually write the code above?

chauptman
10-07-2011, 04:47 AM
part of the above is from http://www.javascriptkit.com/script/cut174.shtml, and I cannot seem to make it function with more than one drop down menu, Ive renamed all the functions and variables, and still cannot manage to make the second drop down menu to work

chump2877
10-07-2011, 06:16 AM
Without fixing up your script any more than I had to, this appears to do what you need (only tested in Firefox):


<?xml version="1.0" encoding=""?>
<!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">
<head>
<title> Welcome to Cirula </title>
<style type="text/css">
body { margin:0; padding:0; }
html
{
background: url(http://www.cirula.com/images/waterdrops.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<script type="text/javascript">
var expDays = 30;

function setCookie(name, val)
{
var exp = new Date()
var cookieTimeToLive = exp.getTime() + (expDays * 24 * 60 * 60 * 1000)
exp.setTime(cookieTimeToLive)
document.cookie = name + "=" + escape(val) + "; expires=" + exp.toGMTString()
}

function getCookie(name)
{
var cookieNameLen = name.length
var cLen = document.cookie.length
var i = 0
var cEnd
var myStringToReturn
var myStringToReturnLen
while (i < cLen)
{
var j = i + cookieNameLen
if (document.cookie.substring(i,j) == name)
{
cEnd = document.cookie.indexOf(";",j)
if (cEnd == -1)
{
cEnd = document.cookie.length
}
myStringToReturn = unescape(document.cookie.substring(j,cEnd))
myStringToReturnLen = myStringToReturn.length
myStringToReturn = myStringToReturn.substring(1,myStringToReturnLen+1)
return myStringToReturn
}
i++
}
return ""
}


function setDefaultValues()
{
for (var i=0; i<document.forms.length; i++)
{
for (j=0; j<document.forms[i].elements.length; j++)
{
var formField = document.forms[i].elements[j];
if (formField.className == "menu")
{
var strCookieName = formField.name;
var strCookieVal = getCookie(strCookieName);
if (strCookieVal != null && !(isNaN(strCookieVal)) && strCookieVal != '')
{
formField.selectedIndex = strCookieVal;
}
showimage(formField);
}
}
}
}

function linkrotate(which)
{
var mylinks = new Array();
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0] = "http://www.google.com";
mylinks[1] = "http://www.ebay.com";
mylinks[2] = "http://www.yahoo.com";
return mylinks[which];
}

function showimage(menu)
{
var formImages = menu.form.getElementsByTagName('img');
for (var i=0; i<formImages.length; i++)
{
if (formImages[i].className == "menuPic")
{
var pic = formImages[i];
break;
}
}
pic.src = menu.options[menu.selectedIndex].value;
pic.parentNode.href = linkrotate(menu.selectedIndex);
setCookie(menu.name, menu.selectedIndex)
}

window.onload = setDefaultValues;
</script>
</head>
<body>
<div align="center">
<form name="mygallery">
<p><select class="menu" name="picture" onchange="showimage(this);" size="1">
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
<p align="center">
<a href="http://www.google.com"><img src="http://www.cirula.com/images/google.png" id="pictures" width="150" height="150" border="0" class="menuPic"></a>
</p>
</form>

<br><br>

<form name="mygallery2">
<p><select class="menu" name="picture2" onchange="showimage(this);" size="1">
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
<p align="center">
<a href="http://www.google.com"><img src="http://www.cirula.com/images/google.png" id="pictures2" width="150" height="150" border="0" class="menuPic"></a>
</p>
</form>

<br><br>

<div align="center">Content copyright <script type='text/javascript'>if (typeof(getCopyrightDate)=='function') document.write(getCopyrightDate(2011, null, '-')); else document.write((new Date()).getFullYear());</script>. CIRULA.COM. All rights reserved.</div>
</div>
<div align="center">
<span id="cdSiteSeal1"><script type="text/javascript" src="//tracedseals.starfieldtech.com/siteseal/get?scriptId=cdSiteSeal1&amp;cdSealType=Seal1&amp;sealId=55e4ye7y7mb7356629c9512c8fb77029yp0y7mb7355e4ye7fe5 26528f1956fb9"></script></span>
</div>
</body>
</html>

The "class" names for the menus and images must appear in the HTML markup for this code to work.

chauptman
10-07-2011, 06:41 AM
you sir are definitely amazing! thank you so much for your help!

chump2877
10-07-2011, 08:17 AM
<?xml version="1.0" encoding=""?>
<!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">
<head>
<title> Welcome to Cirula </title>
<style type="text/css">
body { margin:0; padding:0; }
html
{
background: url(http://www.cirula.com/images/waterdrops.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<script type="text/javascript">
var expDays = 30;

function setCookie(name, val)
{
var exp = new Date()
var cookieTimeToLive = exp.getTime() + (expDays * 24 * 60 * 60 * 1000)
exp.setTime(cookieTimeToLive)
document.cookie = name + "=" + escape(val) + "; expires=" + exp.toGMTString()
}

function getCookie(name)
{
var cookieNameLen = name.length
var cLen = document.cookie.length
var i = 0
var cEnd
var myStringToReturn
var myStringToReturnLen
while (i < cLen)
{
var j = i + cookieNameLen
if (document.cookie.substring(i,j) == name)
{
cEnd = document.cookie.indexOf(";",j)
if (cEnd == -1)
{
cEnd = document.cookie.length
}
myStringToReturn = unescape(document.cookie.substring(j,cEnd))
myStringToReturnLen = myStringToReturn.length
myStringToReturn = myStringToReturn.substring(1,myStringToReturnLen+1)
return myStringToReturn
}
i++
}
return ""
}


function setDefaultValues()
{
for (var i=0; i<document.forms.length; i++)
{
for (j=0; j<document.forms[i].elements.length; j++)
{
var formField = document.forms[i].elements[j];
if (formField.className == "menu")
{
var strCookieName = formField.name;
var strCookieVal = getCookie(strCookieName);
if (strCookieVal != null && !(isNaN(strCookieVal)) && strCookieVal != '')
{
formField.selectedIndex = strCookieVal;
}
showimage(formField);
}
}
}
}

function linkrotate(which)
{
var mylinks = new Array();
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0] = "http://www.google.com";
mylinks[1] = "http://www.ebay.com";
mylinks[2] = "http://www.yahoo.com";
return mylinks[which];
}

function showimage(menu)
{
var docImages = document.getElementsByTagName('img');
for (var i=0; i<docImages.length; i++)
{
if (docImages[i].className == menu.name)
{
var pic = docImages[i];
break;
}
}
pic.src = menu.options[menu.selectedIndex].value;
pic.parentNode.href = linkrotate(menu.selectedIndex);
setCookie(menu.name, menu.selectedIndex)
}

window.onload = setDefaultValues;
</script>
</head>
<body>
<div align="center">
<form name="mygallery">
<p><select class="menu" name="picture" onchange="showimage(this);" size="1">
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
</form>

<p align="center">
<a href="http://www.google.com"><img src="http://www.cirula.com/images/google.png" id="pictures" width="150" height="150" border="0" class="picture"></a>
</p>

<br><br>

<form name="mygallery2">
<p><select class="menu" name="picture2" onchange="showimage(this);" size="1">
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
</form>

<p align="center">
<a href="http://www.google.com"><img src="http://www.cirula.com/images/google.png" id="pictures2" width="150" height="150" border="0" class="picture2"></a>
</p>

<br><br>

<div align="center">Content copyright <script type='text/javascript'>if (typeof(getCopyrightDate)=='function') document.write(getCopyrightDate(2011, null, '-')); else document.write((new Date()).getFullYear());</script>. CIRULA.COM. All rights reserved.</div>
</div>
<div align="center">
<span id="cdSiteSeal1"><script type="text/javascript" src="//tracedseals.starfieldtech.com/siteseal/get?scriptId=cdSiteSeal1&amp;cdSealType=Seal1&amp;sealId=55e4ye7y7mb7356629c9512c8fb77029yp0y7mb7355e4ye7fe5 26528f1956fb9"></script></span>
</div>
</body>
</html>

FYI - If you won't have the same pictures and links for every menu, then you'll want to replace linkrotate() with another solution...I dont know if that is the case...

chump2877
10-07-2011, 08:38 AM
<?xml version="1.0" encoding=""?>
<!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">
<head>
<title> Welcome to Cirula </title>
<style type="text/css">
body { margin:0; padding:0; }
html
{
background: url(http://www.cirula.com/images/waterdrops.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<script type="text/javascript">
var expDays = 30;
var mylinks = {
'picture' : [
"http://www.google.com",
"http://www.ebay.com",
"http://www.yahoo.com"
],
'picture2' : [
"http://www.goodfgdfggle.com",
"http://www.ebadfgdfgy.com",
"http://www.yahdfgdfgoo.com"
]
};

function setCookie(name, val)
{
var exp = new Date()
var cookieTimeToLive = exp.getTime() + (expDays * 24 * 60 * 60 * 1000)
exp.setTime(cookieTimeToLive)
document.cookie = name + "=" + escape(val) + "; expires=" + exp.toGMTString()
}

function getCookie(name)
{
var cookieNameLen = name.length
var cLen = document.cookie.length
var i = 0
var cEnd
var myStringToReturn
var myStringToReturnLen
while (i < cLen)
{
var j = i + cookieNameLen
if (document.cookie.substring(i,j) == name)
{
cEnd = document.cookie.indexOf(";",j)
if (cEnd == -1)
{
cEnd = document.cookie.length
}
myStringToReturn = unescape(document.cookie.substring(j,cEnd))
myStringToReturnLen = myStringToReturn.length
myStringToReturn = myStringToReturn.substring(1,myStringToReturnLen+1)
return myStringToReturn
}
i++
}
return ""
}


function setDefaultValues()
{
for (var i=0; i<document.forms.length; i++)
{
for (j=0; j<document.forms[i].elements.length; j++)
{
var formField = document.forms[i].elements[j];
if (formField.className == "menu")
{
var strCookieName = formField.name;
var strCookieVal = getCookie(strCookieName);
if (strCookieVal != null && !(isNaN(strCookieVal)) && strCookieVal != '')
{
formField.selectedIndex = strCookieVal;
}
showimage(formField);
}
}
}
}

function showimage(menu)
{
var docImages = document.getElementsByTagName('img');
for (var i=0; i<docImages.length; i++)
{
if (docImages[i].className == menu.name)
{
var pic = docImages[i];
break;
}
}
pic.src = menu.options[menu.selectedIndex].value;
pic.parentNode.href = mylinks[menu.name][menu.selectedIndex];
setCookie(menu.name, menu.selectedIndex)
}

window.onload = setDefaultValues;
</script>
</head>
<body>
<div align="center">
<form name="mygallery">
<p><select class="menu" name="picture" onchange="showimage(this);" size="1">
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
</form>

<p align="center">
<a href="http://www.google.com"><img src="http://www.cirula.com/images/google.png" id="pictures" width="150" height="150" border="0" class="picture"></a>
</p>

<br><br>

<form name="mygallery2">
<p><select class="menu" name="picture2" onchange="showimage(this);" size="1">
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
</form>

<p align="center">
<a href="http://www.google.com"><img src="http://www.cirula.com/images/google.png" id="pictures2" width="150" height="150" border="0" class="picture2"></a>
</p>

<br><br>

<div align="center">Content copyright <script type='text/javascript'>if (typeof(getCopyrightDate)=='function') document.write(getCopyrightDate(2011, null, '-')); else document.write((new Date()).getFullYear());</script>. CIRULA.COM. All rights reserved.</div>
</div>
<div align="center">
<span id="cdSiteSeal1"><script type="text/javascript" src="//tracedseals.starfieldtech.com/siteseal/get?scriptId=cdSiteSeal1&amp;cdSealType=Seal1&amp;sealId=55e4ye7y7mb7356629c9512c8fb77029yp0y7mb7355e4ye7fe5 26528f1956fb9"></script></span>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum