plaatje arceren
Op deze manier:
Geselecteerd:
Gedeselecteerd:
Dit is wat ik tot nu toe heb:
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Checkbox</title>
<style type='text/css'>
div {
width:100px;
height:100px;
cursor:pointer;
}
.white { background: #fff; }
.black { background: #000; }
</style>
<script type="text/javascript">
function clk(el,cl1,cl2,chbx_id){
el.className=(el.className==cl1)?cl2:cl1;
document.getElementById(chbx_id).checked = (el.className==cl1)?'':'checked';
}
</script>
<script type="text/javascript">
function checkAll(field)
{
for (var i = 0; i < field.length; i++)
{
field[i].checked = true ;
document.getElementById('test' + i).className = 'white';
}
}
function uncheckAll(field)
{
for (var i = 0; i < field.length; i++)
{
field[i].checked = false;
document.getElementById('test' + i).className = 'black';
}
}
</script>
</head>
<body>
<button onclick="checkAll(document.myform.checkbox)">Check All</button>
<button onclick="uncheckAll(document.myform.checkbox)">Uncheck All</button>
<form name="myform" action="test2.htm" method="get">
<input type="submit" value="Click!" />
<br>
<div id="test0" class="black" onclick="clk(this,'black','white','my_checkbox0')"><img src="http://img29.imageshack.us/img29/8894/laika95091avatar.jpg" /></div>
<input type="checkbox" id="my_checkbox0" name="checkbox" value="0" checked/>
<div id="test1" class="black" onclick="clk(this,'black','white','my_checkbox1')"><img src="http://img29.imageshack.us/img29/8894/laika95091avatar.jpg" /></div>
<input type="checkbox" id="my_checkbox1" name="checkbox" value="1" checked/>
<div id="test2" class="black" onclick="clk(this,'black','white','my_checkbox2')"><img src="http://img29.imageshack.us/img29/8894/laika95091avatar.jpg" /></div>
<input type="checkbox" id="my_checkbox2" name="checkbox" value="2" checked/>
<div id="test3" class="black" onclick="clk(this,'black','white','my_checkbox3')"><img src="http://img29.imageshack.us/img29/8894/laika95091avatar.jpg" /></div>
<input type="checkbox" id="my_checkbox3" name="checkbox" value="3" checked/>
</form>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Checkbox</title>
<style type='text/css'>
div {
width:100px;
height:100px;
cursor:pointer;
}
.white { background: #fff; }
.black { background: #000; }
</style>
<script type="text/javascript">
function clk(el,cl1,cl2,chbx_id){
el.className=(el.className==cl1)?cl2:cl1;
document.getElementById(chbx_id).checked = (el.className==cl1)?'':'checked';
}
</script>
<script type="text/javascript">
function checkAll(field)
{
for (var i = 0; i < field.length; i++)
{
field[i].checked = true ;
document.getElementById('test' + i).className = 'white';
}
}
function uncheckAll(field)
{
for (var i = 0; i < field.length; i++)
{
field[i].checked = false;
document.getElementById('test' + i).className = 'black';
}
}
</script>
</head>
<body>
<button onclick="checkAll(document.myform.checkbox)">Check All</button>
<button onclick="uncheckAll(document.myform.checkbox)">Uncheck All</button>
<form name="myform" action="test2.htm" method="get">
<input type="submit" value="Click!" />
<br>
<div id="test0" class="black" onclick="clk(this,'black','white','my_checkbox0')"><img src="http://img29.imageshack.us/img29/8894/laika95091avatar.jpg" /></div>
<input type="checkbox" id="my_checkbox0" name="checkbox" value="0" checked/>
<div id="test1" class="black" onclick="clk(this,'black','white','my_checkbox1')"><img src="http://img29.imageshack.us/img29/8894/laika95091avatar.jpg" /></div>
<input type="checkbox" id="my_checkbox1" name="checkbox" value="1" checked/>
<div id="test2" class="black" onclick="clk(this,'black','white','my_checkbox2')"><img src="http://img29.imageshack.us/img29/8894/laika95091avatar.jpg" /></div>
<input type="checkbox" id="my_checkbox2" name="checkbox" value="2" checked/>
<div id="test3" class="black" onclick="clk(this,'black','white','my_checkbox3')"><img src="http://img29.imageshack.us/img29/8894/laika95091avatar.jpg" /></div>
<input type="checkbox" id="my_checkbox3" name="checkbox" value="3" checked/>
</form>
</body>
</html>
Gewijzigd op 29/05/2012 11:13:40 door Koh do
als selected geef class black anders class white en dan hoef je alleen die 2 styles op te maken.
Als die aangeklikt wordt een andere klasse meegeven, de selected class een zwarte background meegeven een een opacity van 0.8 of 0.6 of iets in die trant.
Succes!