Je roept de functie aan in het onclick event, dus changeImg() Waarin je 2 parameters moet meegeven. Namelijk img en newimg. Waarbij img het element bevat die je een nieuwe afbeelding wil geven en newimg is de link van de nieuwe afbeelding. "this" betekent overigens gewoon dat hij zichzelf als element moet meegeven.
Hey ja nu werkt het inderdaad :D super bedankt!! maar is er ook een unclick mogelijkheid? dus als je er weer op klikt dat ie terug gaat naar de vorige afbeelding?
Dan moet je een toggle functie maken. Doormiddel van een if else constructie kijk je of de src gelijk is aan de oude src, zo ja dan laat je de andere src zien. Als de src gelijk is aan de nieuwe src laat je de oude src zien. Een klein beginnetje:
<img src="images/afbeelding1.png" onclick="changeImg(this, 'images/afbeelding2.png', 'images/afbeeling1.png')" />
<script type="text/javascript">
function changeImg( elem, newSrc, oldSrc ) {
// Kijken of de huidige src gelijk is aan oldSrc
if( elem.src == oldSrc ) {
// Maak de src van de afbeelding de nieuwe src
}
// Zoniet, dan kijken of hij gelijk is aan de nieuwe src
else if ( elem.src == newSrc ) {
// Maak de src van de afbeelding de oude src
}
}
</script>
Nog mooier is iets als dit, maar dat wordt waarschijnlijk te moeilijk te begrijpen voor beginners:
var changeImg = (function() {
var oldSrc;
return function( elem, newSrc ) {
if( oldSrc == '' ) {
oldSrc = elem.src;
}
if( elem.src == oldSrc ) {
// src moet nieuwe src zijn
}
else if( elem.src == newSrc ) {
// src moet oude src zijn
}
}
})();
In dit geval hoef je geen oldSrc meer in te vullen.
