Checkbox naar image
Op dit moment heb ik een draaiende 3d kubus. Met een checkbox kan ik de transparantie hiervan aan en uit zetten.
De volgende code voert deze actie uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
function toggleBackfaces() {
var backfacesVisible = document.getElementById('backfaces').checked;
var shape = document.getElementById('shape');
if (backfacesVisible) {
addClassName(shape, 'backfaces');
}
else {
removeClassName(shape, 'backfaces');
}
}
var backfacesVisible = document.getElementById('backfaces').checked;
var shape = document.getElementById('shape');
if (backfacesVisible) {
addClassName(shape, 'backfaces');
}
else {
removeClassName(shape, 'backfaces');
}
}
Nu wil ik graag een afbeelding hebben die deze actie uitvoert inplaats van een checkbox. Dus als de bezoeker op de afbeelding klikt dat de transparantie uitgaat, en als ze nogmaals klikken weer aan.
Iemand enig idee hoe ik dat moet oplossen?
Alvast bedankt!
Mvg,
Robin.
maar ik zou nogenees een checkbox neemen gewoon enkel een afbeelding bij klik status in js veranderen en de afbeeldin een toggel dus.
Hier ff gemaakt verveelde mij.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
<!--
var visibleStatus = false;
function toggleBackfaces(){
var shape = document.getElementById('shape');
if (!visibleStatus){
addClassName(shape, 'backfaces');
visibleStatus = true;
document.getElementById('checkbox').src = 'http://png-5.findicons.com/files//icons/2428/woocons/32/checkbox_full.png';
} else {
removeClassName(shape, 'backfaces');
visibleStatus = false;
document.getElementById('checkbox').src = 'http://png-4.findicons.com/files//icons/2428/woocons/32/checkbox_empty.png';
}
alert('De visible status is: '+visibleStatus);
}
// -->
</script>
<a href="#" onclick="javascript:toggleBackfaces();"><img id="checkbox" src="http://png-4.findicons.com/files//icons/2428/woocons/32/checkbox_empty.png" border="0"></img></a>
<!--
var visibleStatus = false;
function toggleBackfaces(){
var shape = document.getElementById('shape');
if (!visibleStatus){
addClassName(shape, 'backfaces');
visibleStatus = true;
document.getElementById('checkbox').src = 'http://png-5.findicons.com/files//icons/2428/woocons/32/checkbox_full.png';
} else {
removeClassName(shape, 'backfaces');
visibleStatus = false;
document.getElementById('checkbox').src = 'http://png-4.findicons.com/files//icons/2428/woocons/32/checkbox_empty.png';
}
alert('De visible status is: '+visibleStatus);
}
// -->
</script>
<a href="#" onclick="javascript:toggleBackfaces();"><img id="checkbox" src="http://png-4.findicons.com/files//icons/2428/woocons/32/checkbox_empty.png" border="0"></img></a>
Gewijzigd op 11/05/2012 19:17:08 door Joey Drieling