Set Cookies na uitzetten achtergrondafbeelding naar achtergrondkleur en terug

Door Code Runner op 10-06-2012 01:17 gewijzigd op 10-06-2012 01:43

1.657 views

Beste forum lezers,

Ik raak niet meer verder. Het is de bedoeling dat bezoekers eventueel de achtergrond kunnen uitschakelen (en terugzetten) door een onclick. Dit werkt maar nu zou het geselecteerde (wel of geen achtergrond) moeten onthouden worden wanneer men op de website naar een andere pagina gaat en ik veronderstel met een cookie. Wat doe ik verkeerd en/of welke code ben ik vergeten en/of welke code is er fout in hetgeen ik nu al heb? (eventueel aanpassing in javascript of met php)
Alvast bedankt voor jullie hulp.

De code die ik nu al heb is deze

<!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">

<head>


<title>Menu toggle background</title>

	<style type="text/css">
	<!--
		* { margin: 0; padding: 0; }
				
		html, body { margin: 0; padding: 0; width: 100%; height: 100%; } 
		img { border: 0; } 
		
		img#back { 
			position: fixed; 
			left: 0px; 
			top: 0px; 
			width: 100%; 
			height: 100%; 
			z-index: -1; 
			_display:none;
		} 	
		
		
		body {
			background-color: #94a5c3;
			font: 14px Century Gothic, Arial, Helvetica;
			color: #000080; /*#010271;*/
		}
		//-->
		</style>
	

<!-- SET COOKIE -->
<script type = "text/javascript">
// <body onload ="readCookie('mycookiename'); eraseCookie('mycookiename'); createCookie('mycookiename','anything', 365)">
//name = "mycookiename" or whatever name you wish to give the cookie
//value = "anything" - in this case the url of the image
//days = number of days cookie to remain active (say 365)

//Using the following functions are from quirksmode. - START
function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') 
            c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) 
            return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}
 
function toggle() {
eraseCookie('background');
	var element = document.getElementById("back");
	var text = document.getElementById("displayText");
		if(element.style.display == "none") 
		{
    		element.style.display = "block";
			text.innerHTML = "Verberg achtergrond";
			createCookie( "background", "id", 365);
		}
		else 
		{
		element.style.display = "none";
		text.innerHTML = "Toon achtergrond";
		createCookie( "background", "id", 365);
		}
} 
</script>	
	
</head>
<body onload ="readCookie('background'); eraseCookie('background'); createCookie('background','id', 365)">

<img id="back" src="http://miriadna.com/desctopwalls/images/max/Blue-sea-horizon.jpg" alt="" title="" /> 

<div style="border:0;position:fixed;top:205px;right:0;width:200px;height:22px;border:1px solid #FFFFFF;background-color:#000080;text-align:center;color:white;"> <a id="displayText" style="cursor: pointer;cursor: hand;" onClick="toggle();">Verberg achtergrond</a></div>