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 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts

    A little bit of help

    Hello, relatively new to all web coding, i need just a little help.

    I have a cookie placed to bring back an option from a drop down menu, and the drop down box also displays a picture. The cookie works perfect remembering what the user picked on the drop down menu, but when the page is reloaded, the picture goes back to the default image, is there a way to fix it so on load the picture will correspond to the option.

    Here is a live example: www.cirula.com/options

    Heres my code:
    Code:
    <SCRIPT LANGUAGE = "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()
    {
    	var strCookieName, strCookieVal
    	var iFormsCount = 0
    	var iElementsCount = 0
    	for(iFormsCount=0;iFormsCount < document.forms.length;iFormsCount++)
    	{
    		for(iElementsCount=0;iElementsCount < document.forms[iFormsCount].elements.length;iElementsCount++)
    		{
    			strCookieName = document.forms[iFormsCount].elements[iElementsCount].name
    			strCookieVal = getCookie(strCookieName)
    			if (strCookieVal != null && !(isNaN(strCookieVal)) && strCookieVal != '')
    			{
    					document.forms[iFormsCount].elements[iElementsCount].selectedIndex = strCookieVal
    			}
    		}
    	}
    }
    
    </SCRIPT>
    
    
    <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"> 
    
    
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100%"><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>
    </td>
    </tr>
    <tr>
    <td width="100%"><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></td>
    </tr>
    </table>
    </body>
    </html>
    Last edited by chauptman; 10-06-2011 at 09:49 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    You just need to add
    showimage() to
    setdefaulrvalues ....

    Code:
    <SCRIPT LANGUAGE = "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()
    {
    	var strCookieName, strCookieVal
    	//var iFormsCount = 0
    	var iElementsCount = 0
    	for(var iFormsCount=0;iFormsCount < document.forms.length;iFormsCount++)
    	{
    		for(iElementsCount=0;iElementsCount < document.forms[iFormsCount].elements.length;iElementsCount++)
    		{
    			strCookieName = document.forms[iFormsCount].elements[iElementsCount].name
    			strCookieVal = getCookie(strCookieName)
    			if (strCookieVal != null && !(isNaN(strCookieVal)) && strCookieVal != ''){
    					document.forms[iFormsCount].elements[iElementsCount].selectedIndex = strCookieVal
    			}
    		showimage()
    		}
    	}
    }
    
    </SCRIPT>
    
    
    <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"> 
    
    
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="100%"><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>
    </td>
    </tr>
    <tr>
    <td width="100%"><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></td>
    </tr>
    </table>
    </body>
    </html>

  • Users who have thanked DaveyErwin for this post:

    chauptman (10-06-2011)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    Try this:
    Code:
    <html>
    <head>
    <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 ""
    }
    
    
    var mylinks = [
         "http://www.google.com", "http://www.ebay.com", "http://www.yahoo.com"
        ];
    
    function linkrotate(which){
        window.location=mylinks[which]
    }
    
    function showimage(select)
    {
        document.getElementById("pictures").src = select.value;
    }
    
    function setPicture( )
    {
        var sel = document.mygallery.picture;
        sel.selectedIndex = getCookie("picture");
        showimage( sel );
    }
    
    window.onload = setPicture;
    </script>
    </head>
    <body>
    <div align="center"> 
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%">
            <form name="mygallery">
            <p>
            <select name="picture" onChange="showimage(this); 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>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <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>
        </td>
    </tr>
    </table>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    chauptman (10-06-2011)

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thank you both so much this really help me out!!!!


  •  

    Posting Permissions

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