Checkbox naar image

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Robin S

Robin S

11/05/2012 15:56:59
Quote Anchor link
Beste leden,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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');
  }

}


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.
 
PHP hulp

PHP hulp

26/01/2021 01:12:05
 
Joey Drieling

Joey Drieling

11/05/2012 17:08:47
Quote Anchor link
Dat zal je met javascript moeten doen je! je verbergd de checkbox in zijn plaats laat je een afbeelding zien met js vang je de klik op en zet je de checkbox op checked, en ook zo weer andersom.

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>
Gewijzigd op 11/05/2012 19:17:08 door Joey Drieling
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.