onclick functie om image te veranderen.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Stef ter Braak

Stef ter Braak

13/04/2011 18:14:25
Quote Anchor link
Beste mensen,


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

PHP hulp

18/12/2024 06:32:43
 
Vincent Huisman

Vincent Huisman

13/04/2011 18:19:57
Quote Anchor link
met onclick moet je een javascriptfunctie aanroepen
 
Stef ter Braak

Stef ter Braak

13/04/2011 18:23:23
Quote Anchor link
en dat doe ik.. hoe?

<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
 

13/04/2011 18:43:24
Quote Anchor link
<img src="images/repeat-image.png" onclick="changeImg(this, 'images/repeat-image-on.png');" width="43" height="44" border="0" />

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.
 
Stef ter Braak

Stef ter Braak

13/04/2011 19:08:09
Quote Anchor link
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?
 
Wouter J

Wouter J

13/04/2011 19:17:19
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

Nog mooier is iets als dit, maar dat wordt waarschijnlijk te moeilijk te begrijpen voor beginners:
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
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.
 



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.