jQuery, image veranderen

Door Donny Wie weet op 24-09-2013 23:10

1.066 views

Hoi allemaal,

Ik wil een afbeelding veranderen als ik erop klik. Maar wanneer ik er weer op klik moet ie weer terug naar zn oorspronkelijke waarde... Ik gebruik een slideToggle. onClick slide de div open, je klikt dan op een pijltje naar beneden. Wanneer je op het pijltje klikt, moet de afbeelding met het pijltje omhoog te voorschijn komen.

Hoe doe ik dit? Ik weet wel dat ik de .addAttr() en .removeAttr() moet gebruiken

Albert de Wit

25-09-2013 11:55

met jQuery kun je heel makkelijk attributen veranderen.

Stel:


<img src="jouwAfbeelding.png" id="jouwAfbeelding" data-originalImg="jouwAfbeelding.png" data-otherImg="jouwAndereAfbeelding.png">
<script type="text/javascript">
$('#jouwAfbeelding').click(function(){
	if ($(this).attr('src') == $(this).attr('data-originalImg')){
		$(this).attr('src', $(this).attr('data-otherImg'));
	}else{
		$(this).attr('src', $(this).attr('data-originalImg'));
	}
});
</script>

Je kunt met HTML5 je elementen een eigen verzonnen attribuut geven als je er data- voor zet. Je geeft dus 2 attributen genaamd 'data-originalImg' en 'data-otherImg' mee (namen spreken voor zich welke informatie je erin moet zetten). Die vergelijk je met de huidige 'src' en als ze overeenkomen geef je de 'src' de waarde van de andere attribuut.

Reageren

Inloggen om te reageren