Discussion :

[mauderific]

Salut à tous ! Une petite colle pour vous

Présentement j'ai le code suivant

Code html :

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

1
2
3
4
5
 <a href="#">
            <img class="test" src="/app/images/img1.jpg" />
            <img class="overview_title" src="/app/images/bkg_img2.jpg" />
            <img class="overview_pic" src="/app/images/bkg_img3.jpg" />        
</a>

Ce que je veux, c'est que mon img.test, soient invisible quand je ne suis pas sure lien, et que lorsque je passe mon curseur sur le lien, img.test apparaissent. (sa ajoute un effet sur les deux autre images qui sont en dessous.)

Avec le code css suivant :

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
18
19
20
21
22
23
 
 
 a img.test{
   display:none;
 
}
 
a:hover img.test{
   display:block;
   position:absolute;
   top:0px;
   left:0px;
   z-index:99;
}
 .overview_title{
   position:relative;
}
 
 .overview_pic{
   position:relative;
   left:-3px;
   z-index:1;   
}

Bon avec ça, tout fonctionne parfaitement dans Firefox, Safari et Opéra. Mais comme d'habitude, IE fait a sa tête...


Je sais que c'est surtout le fait que IE a des problèmes avec le :hover...

Une idée quelqu'un ??

[Erwan31]

Je sais que c'est surtout le fait que IE a des problèmes avec le :hover...

Non IE supporte très bien les pseudo-classes dynamiques sur les liens.
Cela vient d'un bug IE.
Ajouter

Code :

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

a:hover {background: none;}

[mauderific]

Sa fonctionne toujours pas... j'ai changé un peu mon css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
a img.test{
   position:absolute;
   top:0px;
   left:0px;
   z-index:99;
   visibility:hidden;
 
}
 
a:hover img.test{
   visibility:visible;
}

Sa fonctionne partout, sauf dans IE6..... Il ne comprend tout simplement pas le img.test. Help !!

[Ani[MAL]]

Essaye ca :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a img.test{
   position:absolute;
   top:0px;
   top:0px !dez;
   left:0px;
   left:0px !dez;
   z-index:99;
   visibility:hidden;
 
}
 
a:hover img.test{
   visibility:visible;
}

[mauderific]

Le problème c'est pas que IE positionne mal mon image. Elle est bien positionnée (si je la rend visible). Mais c'est l'action de passer de invisible a visible qui ne fonctionne pas ds IE6....

[Candygirl]

Non IE supporte très bien les pseudo-classes dynamiques sur les liens.
Cela vient d'un bug IE.
Ajouter

Code :

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

a:hover {background: none;}

As-tu testé? Même si cela peut paraître étrange au premier abord (mais c'est IE...), attribuer une propriété bidon sur le a:hover permet effectivement le fonctionnement sur IE6.

[mauderific]

Je viens de réessayer et Non ça ne fonctionne toujours pas.....

[Candygirl]

Plutôt que de juste dire:

Non ça ne fonctionne toujours pas.....

Tu pourrais spécifier plus précisément en quoi cela ne fonctionne pas correctement.

En l'occurence l'ajout d'une propriété sur le a:hover permet bien de faire apparaître l'image (alors que cela n'était pas le cas avant) mais elle ne disparaît pas.

Un moyen de le faire fonctionner est de jouer avec les dimensions de l'image plutôt que le display. Cela permet en plus que l'image soit préchargée sous tous les navigateurs (cf http://meyerweb.com/eric/css/edge/popups/demo2.html)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
a img.test{
	 border:0;
	 position:absolute;
   top:0px;
   left:0px;
	 width:0;
	 height:0;	 
}
 
a:hover img.test{
	 width:auto;
	 height:auto;
}

MAIS, opera n'accepte pas, je me suis toujours demandé pourquoi, de réduire une image à 0px; il reste 1px...

On peut alors envisager utiliser le width/height que pour IE6-, par exemple.