Discussion :

[kael kael]

Bonjour

J'ai fait un petit morceau de code qui permet, lorsqu'on passe la souris sur une zone de l'image, de voir la zone en plus grand (en l'affichant sur le côté).
Pour le principe je me suis inspiré de ceci : http://www.cssplay.co.uk/menu/old_master.html

Mon script peut être trouvé ici : http://bugsie.kaelkael.no-ip.org/image_zoomable.php

Dans Opera 9, Firefox 1.5, Konqueror 3.5.3 le script marche bien mais avec IE 6 il y a un problème...

Lorsqu'on passe la souris sur la zone de l'image, la grande image apparaît bien sur le côté mais quand la souris quitte la zone ... l'image sur le côté ne veut pas disparaître. Pourtant le fait que la bordure se mette en rouge indique qu'IE a bien traité ce morceau de code :

Code :

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

1
2
3
4
#imageZoomable2 a img {
  display : none;
  border : 2px solid red;
}

IE a-t-il oublié comment faire un display:none ? Il y a un rituel vaudou à exécuter pour que cela marche ? ou alors il ne me reste plus qu'à prier pour que tous les utilisateurs d'IE se mettent à utiliser un navigateur web ?

Sérieusement, ça fait un petit moment que je cherche et je ne vois pas ce qui peut poser problème à IE ... j'ai regardé dans le code CSS de CSS PLay et ils utilisent le même principe pour faire disparaître l'image... (j'ai aussi essayé avec un visibility:hidden sans plus de succès)

Merci d'avance pour votre aide

[Auteur]

bonjour,

sous IE la sous classe hover ne fonctionne qu'avec la balise <a>. L'astuce employée dans ce code est d'associer cette balise <a> avec des balises <span> <img>.

En comparant leur code et le tien, je crois que tu en as oublié un morceau. Le code complet est le suivant (il manquerait le cas "visited"):

Code :

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

1
2
3
4
5
 
#imageZoomable2 a img ,#imageZoomable2 a:visited img {
  display : none;
  border : 2px solid red;
}

-----------------
Personnellement ces méthodes visant à utiliser la classe hover pour faire apparaître ou disparaître des éléments sur une page sans utiliser de code javascript me semblent inutilement compliquées.
Le mieux est d'utiliser les événements onmouseover() et onmouseout().

[kael kael]

Merci pour ta réponse.
Oui, je l'avais mis aussi en voyant leur code mais en fait ça ne change rien puisque la première règle est valide pour tous les types de balises a (qu'elles soient hover, visited, active...).

Le problème ne vient pas d'une mauvaise sélection des éléments avec les règles CSS. Puisque la bordure est bien mise en rouge, cela signifie que le bloc est bien exécuté.

En faisant d'autres tests je me suis rendu compte qu'en enlevant le position:absolute de l'image, IE retirait bien l'image une fois que la souris n'est plus dessus. Un bug avec display:none et position:absolute ?

Personnellement ces méthodes visant à utiliser la classe hover pour faire apparaître ou disparaître des éléments sur une page sans utiliser de code javascript me semblent inutilement compliquées.
Le mieux est d'utiliser les événements onmouseover() et onmouseout().

En fait ça n'est pas très compliqué, le plus dur est juste de le faire marcher dans IE... Quand je peux, je préfère utiliser CSS à Javascript (je préfère faire du CSS).
En fait je ne suis même pas sûr que le problème serait réglé en JS (bon j'ai pas trop l'habitude du JS ) parce qu'il faudrait quand même positionner mes images en absolu et jouer avec les valeurs de display (block ou none) et ce sont ces deux choses qui sont apparemment à l'origine du problème.

[Candygirl]

Hello,

essaie peut-être, de mettre les dimensions de ton image à 0 au lieu du display:none comme indiqué sur cette page

ça donnerait ça à changer dans ton css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#imageZoomable2 a img ,#imageZoomable2 a:visited img {
  width:0; height:0;  border-width:0;
  border : 2px solid red;
}
 
 
#imageZoomable2 a:hover img{
  position:absolute;
  width:255px; height:414px;
  border : 2px solid black;
}

[kael kael]

Salut,

merci beaucoup ! ça marche !

Ah ce IE ! heureusement qu'il est là, sinon ça serait trop facile CSS
En tout cas, je retiens l'astuce pour le display:none