Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Several drop down boxes

    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
    Code:
    <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>
    Last edited by chauptman; 10-07-2011 at 05:42 AM.

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,762
    Thanks
    19
    Thanked 155 Times in 146 Posts
    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?
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,762
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Without fixing up your script any more than I had to, this appears to do what you need (only tested in Firefox):

    Code:
    <?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=55e4ye7y7mb7356629c9512c8fb77029yp0y7mb7355e4ye7fe526528f1956fb9"></script></span>
    	</div>
    </body>
    </html>
    The "class" names for the menus and images must appear in the HTML markup for this code to work.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • Users who have thanked chump2877 for this post:

    chauptman (10-07-2011)

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    you sir are definitely amazing! thank you so much for your help!

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,762
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Code:
    <?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=55e4ye7y7mb7356629c9512c8fb77029yp0y7mb7355e4ye7fe526528f1956fb9"></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...
    Last edited by chump2877; 10-07-2011 at 07:20 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #7
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,762
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Code:
    <?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=55e4ye7y7mb7356629c9512c8fb77029yp0y7mb7355e4ye7fe526528f1956fb9"></script></span>
    	</div>
    </body>
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

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