![]() |
Forum SELFHTML: Archives: |
Le message suivant est de: Cédric Pignat,
cedric@pignat.ch, 07. 05. 2004, 12:26
http://www.pignat.ch
Bonjour
Pour donner un effet de bouton-poussoir qui rÃagit au passage de la souris sur les imagettes de mes albums photo, j'ai utilisà les feuilles de style sous la forme suivante:
<style type="text/css">
<!--
a img {border-style:outset;border-color:#6699CC;border-width:4px;}
a img:hover {border-style:inset;border-color:#6699CC;border-width:4px;}
-->
</style>
puis dans le corps de la page:
<a href="photo_1.html"><img src="thumb_bbeaten.jpg" width="56" height="75" alt="Photo NumÃro 1"></a>
<a href="photo_2.html"><img src="thumb_blesine2.jpg" width="56" height="75" alt="Photo NumÃro 2"></a>
<a href="photo_3.html"><img src="thumb_blesine1.jpg" width="56" height="75" alt="Photo NumÃro 3"></a>
L'effet "rollover" fonctionne parfaitement avec Mozilla (l'essayer c'est l'adopter), mais pas du tout avec l'IE de Microsoft
De plus, l'effet ne fonctionne que partiellement avec Netscape: si le curseur est positionnà sur une imagette et que l'on recharge la page (ctrl+r) le bouton paraÃt pressÃ, mais l'effet disparaÃt lorsqu'on dÃplace la souris.
Tant pis pour les utilisateurs de ces navigateurs, mais j'aimerais comprendre... et savoir si une solution existe.
http://www.pignat.ch/albumspeleo/index.html
Le message suivant est de: Bartouille,
bertrand.wattel_pasDeSpam@free.fr, 07. 05. 2004, 22:07
http://mythes.foret.free.fr
»» Bonjour
Bonjour
»» L'effet "rollover" fonctionne parfaitement avec Mozilla (l'essayer c'est l'adopter), mais pas du tout avec l'IE de Microsoft
»» De plus, l'effet ne fonctionne que partiellement avec Netscape: si le curseur est positionnà sur une imagette et que l'on recharge la page (ctrl+r) le bouton paraÃt pressÃ, mais l'effet disparaÃt lorsqu'on dÃplace la souris.
Selon moi, il s'agit tout simplement d'une histoire d'implÃmentation des pseudo-formats : a img n'est tout simplement pas pris en charge par IE et NS, mais devrait l'Ãtre par la suite.
En tout cas, pour ton problÃme, tu peux te contenter d'utiliser les style de A et A:hover qui est un pseudo-fromat correctement gÃrÃ. Le code suivant devrait te donner plus de satisfactions quelle que soit le navigateur :
<style type="text/css">
<!--
a {border-style:outset;border-color:#6699CC;border-width:4px;}
a:hover {border-style:inset;border-color:#6699CC;border-width:4px;}
-->
</style>
C'est le mÃme, sans les img !
Bartouille
© 1998-2004
selfhtml@fr.selfhtml.org