modifier une image

Version imprimable

modifier une image

Bonjour,

J'aimerai faire une sorte de liste déroulante :

> mon texte

Quand la personne clique ( soit sur l'image, soit sur le texte ), on transforme la page de cette manière :

^ mon texte ( ^ = fleche mais vers le bas )

Sachant que j'ai décidé de faire les flèches avec des images, voici mon code qui ne marche pas, pourquoi ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
   <head>
      <title>Brainstorming</title>
      <link rel="stylesheet" type="text/css" href="brainstorming.css" />
      <!-- ici on met les include de code javascript -->
      <script type="text/javascript" src="brainstorming.js"> </script>
   </head>
<body>
 
<span id="idee" onclick="deroulement();" ><img src="img/fleche_d.gif" alt="fleche_droite" id="fleche_d" /> test <br /></span>
<span id="idee"><img src="img/fleche_d.gif" alt="fleche_droite" id="fleche_d"/> test <br /></span>
<span id="idee"><img src="img/fleche_d.gif" alt="fleche_droite" id="fleche_d"/> test <br /></span>
</body>
</html>

et mon fichier js

Code:

1
2
3
4
5
6
7
function deroulement() {
   var elementClique = this;
   var nouvEle = document.createElement("img");
   nouvEle.setAttribute('src','img/fleche_b.gif');  
   elementClique.replaceNode(elementClique.firstchild,nouvEle);
 
}

merci d'avance

05/12/2009, 21h13
SpaceFrog

pourquoi ne pas juste modifier le src de l'image existante plutot que de remplacer le node ???

résolu

Sujet résolu, je poste mon code pour les intéressés.

Code : JavaScript
Code:

1 2 var nouvEle = elementClique.firstChild; nouvEle.setAttribute('src','img/fleche_b.gif');
ce qui pour le coup fonctionne... Or j'aimerai pouvoir aussi faire un "retour" en arrière, donc revenir a la situation initiale... voici donc mon code qui marche
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function deroulement(elementClique) { var nouvEle = elementClique.firstChild; var type = nouvEle.getAttribute("src"); if(type == 'img/fleche_b.gif') { nouvEle.setAttribute('src','img/fleche_d.gif'); } else { nouvEle.setAttribute('src','img/fleche_b.gif'); } }
donc sujet résolu ! Encore merci pour l'aide !!!