Equivalent z-index en javascript?

j'ai plusieurs photo miniatures les unes à coté des autres. Avec un getDocumentByID, j'affiche la même image en plus grand quand il y a un onMouseOver sur une des images miniatures.
Seulement, la grande image s'affiche sous (ou derrière) les miniatures voisines. Je n'ai pas trouvé de fonction z-index en javascript, mais il doit exister l'équivalent??

bonjour,

regarde dans la FAQ Javascript, le tableau des équivalences ;)

Code:

---

1 2	document.getElementbyId("idObjet").style.zIndex = "100";

---

y-a-t-il une solution pour insérer ça dans le code suivant:

Citation:

---

<img id='img' src="../images/goule-jour-p.jpg" border=0
onMouseover="document.getElementById('img').src='../images/goule-jour-g.jpg'"
onMouseout="document.getElementById('img').src='../images/goule-jour-p.jpg'"><br />

---

ou faut-il obligatoirement créer une fonction??

Simplifie ton code en utilisant this et en utilisant l'attribut style (pour la bordure) ;)

Code:

---

1 2 3 4

<img id='img' src="../images/goule-jour-p.jpg" style="border: none" onMouseover="this.src='../images/goule-jour-g.jpg'" onMouseout="this.src='../images/goule-jour-p.jpg'">

---

pour ce qui est du z-index, je pense qu'il vaut mieux le définir dans une classe une fois pour toute :

Code:

---

1 2 3 4

<img id='img' src="../images/goule-jour-p.jpg" style="border: none; z-index: 1000" onMouseover="this.src='../images/goule-jour-g.jpg'" onMouseout="this.src='../images/goule-jour-p.jpg'">

---

ou si tu tiens au script :

Code:

---

1 2 3 4

<img id='img' src="../images/goule-jour-p.jpg" style="border: none" onMouseover="this.src='../images/goule-jour-g.jpg'; this.style.zIndex='1000' " onMouseout="this.src='../images/goule-jour-p.jpg'; this.style.zIndex='1' ">

---

Le code n'est pas très long, tu peux donc l'insérer dans le code HTML.

Néanmoins, si le reste du code HTML de la page est dense, crée une fonction pour aérer l'ensemble. De plus, tu pourras le réutiliser pour une autre image.

Citation:

---

Envoyé par Auteur

pour ce qui est du z-index, je pense qu'il vaut mieux le définir dans une classe une fois pour toute :

---

C'était effectivement une bonne idée, mais elle est où la classe, là ?
:mrgreen:

Citation:

---

C'était effectivement une bonne idée, mais elle est où la classe, là ?

---

là en gras :

Code:

---

1 2 3 4

<img id='img' src="../images/goule-jour-p.jpg" style="border: none; z-index: 1000" onMouseover="this.src='../images/goule-jour-g.jpg'" onMouseout="this.src='../images/goule-jour-p.jpg'">

---

;)

ou :

Code:

---

1 2 3 4

<img id='img' src="../images/goule-jour-p.jpg" class="styleImage" onMouseover="this.src='../images/goule-jour-g.jpg'" onMouseout="this.src='../images/goule-jour-p.jpg'">

---

avec

Code:

---

1 2 3 4 5 6 7 8 9 10

<style type="text/css"> <!-- .styleImage{ border: none; z-index: 1000; }   //--> </style>

---

Ta 2° version me va beaucoup mieux :D

Ca évitera à Bardhamu de confondre styles et class par la suite ;)

A+

Citation:

---

Envoyé par E.Bzz

Ta 2° version me va beaucoup mieux :D

Ca évitera à Bardhamu de confondre styles et class par la suite ;)

A+

---

oui, en effet :oops:
La classe est définie dans la feuille de style ( CSS ) et encadrée par les balises style. La classe est ensuite appelée dans la balise grâce au mot-clef class="nomDeLaClasse".