Discussion :

[bardhamu]

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

[Auteur]

bonjour,

regarde dans la FAQ Javascript, le tableau des équivalences

Code javascript :

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

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

[bardhamu]

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

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

[Auteur]

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

Code html :

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

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

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

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

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

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.

[E.Bzz]

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à ?

[Auteur]

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

là en gras :

Code html :

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
 
<style type="text/css">
<!--
.styleImage{
border: none; 
z-index: 1000;
}
 
//-->
</style>

[E.Bzz]

Ta 2° version me va beaucoup mieux

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

A+

[Auteur]

Ta 2° version me va beaucoup mieux

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

A+

oui, en effet
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".