image veranderen

Status
Niet open voor verdere reacties.
Mikerosoft

Mikerosoft

Gebruiker
Lid geworden
11 apr 2010
Berichten
12
Ik heb een scriptje voor het veranderen en weer terugveranderen van een plaatje als erop geklikt word.

Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
imgs=Array("images/plaatje1.png","images/plaatje2.png");
var x=0;

function change() {
document.getElementById("bob").src=imgs[++x];

if (x==1) {
x=-1;
}
}
</script>

</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="images/plaatje1.png" id="bob" alt="" onclick="change()">
<img src="images/plaatje1.png" id="bob" alt="" onclick="change()">
</body>
</html>

Maar het probleem is nu dat ik de afbeelding 2 keer heb neergezet en op het moment dat ik op de tweede afbeelding klik dan verandert de eerste. de tweede verandert nooit...

hoe los ik dit op?

ik hoop dat iemand me verder kan helpen
 
HTML: 
<img src="images/plaatje1.png" id="bob" alt="" onclick="change()">
<img src="images/plaatje1.png" id="bob" alt="" onclick="change()">

Dit mag niet, een id moet uniek zijn. Dat is de reden dat enkele de eerste verandert. Verander dit in
HTML: 
<img src="images/plaatje1.png" class="bob" alt="" onclick="change()">
<img src="images/plaatje1.png" class="bob" alt="" onclick="change()">

De change functie wordt dan zo:
[js]function change() {
var images = document.getElementsByTagName("img"); // krijg alle afbeeldingen

x = (x+1) % imgs.length; // verhoog x met 1 en zorg ervoor dat x nooit hoger wordt dan het aantal afbeeldingen in imgs

for(var i=0;i<images.length;i++)
{
if (images.getAttribute("class") == "bob") // Verander alleen de afbeeldingen met classname "bob"
{
images.setAttribute('src', imgs[x]);
}
}
}[/js]
 
Laatst bewerkt:
Ik heb t geprobeerd maar ik denk dat ik iets fout doe. het werkt nog niet. ik heb nu dit:

Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
imgs=Array("images/plaatje1.png","images/plaatje2.png");
var x=0;

function change() {
  var images = document.getElementsByTagName("img");
 
  x = (x+1) % imgs.length;
 
  for(var i=0;i<images.length;i++)
  {
          if (images[i].getAttribute("class") == "bob")
          {
                  images[i].setAttribute('src', imgs[x]);
          }
  }
}
</script>

</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="images/plaatje1.png" class="bob" alt="" onclick="change()">
<img src="images/plaatje1.png" class="bob" alt="" onclick="change()">
</body>
</html>
 
Ik snap het al.. ik deed het verkeerd. het werkt nu wel... bedankt.

Alleen nu is eigenlijk de bedoeling dat de plaatjes individueel kunnen veranderen.. maar dan word het script heel anders of niet?
 
Dan wordt het script inderdaad anders. Het is dan waarschijnlijk het makkelijkste om gebruik te maken van "this", zoals in de code die ik in het PHP forum gaf.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan