modifier une image

**Dahevos** · 05/12/2009, 20h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 05/12/2009, 21h13

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

**Dahevos** · 06/12/2009, 10h43

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

Code : JavaScript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!!

modifier une image

JavaScript

Discussions similaires

Partager

Partager