onclick functie om image te veranderen.
<img src="images/repeat-image.png" onclick="images/repeat-image-on.png" width="43" height="44" border="0" />
Wat doe ik verkeerd?
Secundaire image is goed genaamd staat in de goede map en heeft het zelfde formaat.
Groeten,
Stef
met onclick moet je een javascriptfunctie aanroepen
<script type="text/javascript">
function changeImg(img, newimg)
{
img.src = newimg;
}
</script>
heb ik opgezocht maar begrijp ik niet echt hoe ik dat moet toepassen.
Gewijzigd op 13/04/2011 18:25:27 door Stef ter Braak
Zo dus.
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?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
}
}
})();
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.