Action sur div parents

Bonjour à Tous,

Je dispose de plusieurs DIV "conteneur" avec des images à l'interieur :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<DIV ID="conteneur"> <img id="1" src="image1.png" onClick="border(1);"> <img id="2" src="image2.png" onClick="border(2);"> <img id="3" src="image4.png" onClick="border(3);"> </DIV>   <DIV ID="conteneur"> <img id="4" src="image4.png" onClick="border(4);"> <img id="5" src="image5.png" onClick="border(5);"> </DIV>   <DIV ID="conteneur"> <img id="6" src="image6.png" onClick="border(6);"> <img id="7" src="image7.png" onClick="border(7);"> <img id="8" src="image8.png" onClick="border(8);"> <img id="9" src="image9.png" onClick="border(9);"> </DIV>

---

Ensuite, grace à la fonction border, lorsque je click sur une image, celle-ci devient entourée d'une bordure :

Code:

---

1 2 3 4 5

<script language="JavaScript"> function border(id){ document.getElementById(id).style.border="1px solid #3d4931"; // J'ajoute une bordure à l'image cliquée. } </script>

---

A présent, ce que je cherche à faire c'est appliquer un fond coloré à ma DIV "conteneur" qui contient l'image cliquée.

De quelle façon, par javascript, peut-on séléctionner la DIV parents sans séléctionner les autres DIV qui ont le même ID ?

Tu commets plusieurs erreurs dans ton code :

• <script language="JavaScript"> : l'attribut language ne doit plus être utilisé, en revanche, il faut utiliser l'attribut type : type="text/javascript".
• Un id DOIT être unique dans la page.
• Un id ne doit pas commencer par un chiffre.

Sinon, pour répondre à ta question :

Code:

---

1 2 3 4

function border(id){ document.getElementById(id).style.border="1px solid #3d4931"; // J'ajoute une bordure à l'image cliquée. document.getElementById(id).parentNode.style.backgroundColor="ta_couleur"; }

---

Salut,

Merci pour ta réponse :)

Je vais appliquer tes conseils mais j'aimerais juste comprendre pourquoi un id ne doit pas commencer par un chiffre ?

Bah... pour tout dire, s'il y a une raison logique, je ne la connais pas :aie:
Ceci dit, c'est comme ça qu'un id est défini par les standards XML.

D'accor :) Donc c'est une regle à connaitre un point c'est tout ;-)

Sinon, dernière petite question :

Avec mon même exemple, si je selectionne directement une div "conteneur". Comment faire pour ajouter une bordure sur la premiere image qui est contenu dans cette div ?

D'avance merci !

Il existe plusieurs possibilités, mais selon moi, la meilleure serait :

Code:

---

divconteneur.getElementsByTagName('img')[0].style.border = '...';

---

Jai essayé plusieurs choses mais voilà ce que j'obtiens :

div.getElementsByTagName("img")[0] is undefined

:?

Tu définis comment div ?

Voilà la fonction complete lorsqu'on click sur l'image :

Code:

---

1 2 3 4 5 6 7 8 9 10

function border(j){   var f = "f" + j; var div = document.getElementById(f);   div.style.color="white";   div.getElementsByTagName('img')[0].style.border = "1px solid #3d4931";   }

---

le "div.style.color="white";" Fonctionne très bien, donc ma variable div doit être bonne.

J'ai ajouté un ' f ' au nom de la DIV pour évité qu'elle commance par un chiffre :mouarf:

Citation:

---

Envoyé par Bovino

Il existe plusieurs possibilités, mais selon moi, la meilleure serait :

---

Et les autres solutions seraient ? :mouarf:

Parce que là j'y arrive pas :cry:

Ben il n'y a aucune raison pour que cela ne fonctionne pas :?

Pourrais-tu montrer le code JavaScript + HTML correspondant actuel ?

C'est goooood :)

J'ai bien compris le fonctionnement ;-)

Ca marche, merci !