Action sur div parents

**vinze60** · 14/12/2010, 12h32

Bonjour à Tous,

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

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

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

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 ?

**Bovino** · 14/12/2010, 12h38

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 :

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

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";
}

**vinze60** · 14/12/2010, 13h38

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 ?

**Bovino** · 14/12/2010, 13h42

Bah... pour tout dire, s'il y a une raison logique, je ne la connais pas

Ceci dit, c'est comme ça qu'un id est défini par les standards XML.

**vinze60** · 14/12/2010, 13h51

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 !

**Bovino** · 14/12/2010, 13h54

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

Code :

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

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

**vinze60** · 14/12/2010, 15h12

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

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

**Bovino** · 14/12/2010, 15h24

Tu définis comment div ?

**vinze60** · 14/12/2010, 15h29

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

Code :

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

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