Set Cookies na uitzetten achtergrondafbeelding naar achtergrondkleur en terug
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!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>
<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>
Gewijzigd op 10/06/2012 01:43:48 door Code Runner
Je geeft ze in beide gevallen de zelfde waarde, namelijk "id".
Je leest ze uit bij body onload, maar doet niets met die waarde.
Een voorbeeld van wat je kan doen; ik post de twee functies die ik aangepast heb; de rest kan je onveranderd laten:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
var value = "block"; // default
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)
value = c.substring(nameEQ.length, c.length);
}
var element = document.getElementById("back");
element.style.display = value;
return null;
}
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", "block", 365);
}
else {
element.style.display = "none";
text.innerHTML = "Toon achtergrond";
createCookie( "background", "none", 365);
}
}
var nameEQ = name + "=";
var ca = document.cookie.split(';');
var value = "block"; // default
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)
value = c.substring(nameEQ.length, c.length);
}
var element = document.getElementById("back");
element.style.display = value;
return null;
}
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", "block", 365);
}
else {
element.style.display = "none";
text.innerHTML = "Toon achtergrond";
createCookie( "background", "none", 365);
}
}
En dan nog enkel dit:
<body onload ="readCookie('background');">
Bij onload die cookie terug deleten en terugzetten... is niet nodig.
Gewijzigd op 22/06/2012 13:39:34 door Kris Peeters
Hartelijk bedankt voor je reaktie en voor de verbeterde/aangepaste én goed werkende code die je hier hebt geplaatst. Het doet inderdaad wat het moet doen. Knap werk.
Opgeluchte groeten
Gewijzigd op 22/06/2012 17:17:21 door Code Runner