préchargement en CSS pour roll over (trouvé)

préchargement en CSS pour roll over (trouvé) - HTML/CSS - Programmation

Marsh Posté le 06-10-2005 à 16:11:27    

J'ai des problèmes entre Mozilla et IE avec les préchargement d'image. J'essaye de remplacer une fonction compliquée en JS par du CSS, c'est plusse mieusse.
 
soit le CSS :

Code :
  1. a.roll1 {
  2.      width: 100px;
  3.      height: 25px;
  4.      background: url(ikebana.jpg);
  5.      padding-left:100px;
  6.      margin :0;
  7.      border:0;
  8. }
  9. a.roll1:hover {
  10.      background: url(ikebana2.jpg);
  11. }


..............
 
 
 
dans la page :

Code :
  1. <a class="roll1"  href="histori.htm"  title="ikebana japonais"></a>


dans mozilla ça marche parfaitement (si j'enlève le padding-left l'image disparaît)
 
dans IE (6) je ne vois plus que le lien lui-même en bas, et rien dans la page, même pas le title.
 
..
Je me dis que c'est un problème de taille de boîte, mais je n'en suis pas sûr, et je ne trouve pas la solution.
Donc si quelqu'un peut me dire où je fais une erreur, j'aimerais bien.
Merci
 
...
 
J'ai trouvé.. je laisse le message aucazou :
IE veut au moins un caractère à afficher, bon, alors :
 

Code :
  1. <a class="roll1"  href="histori.htm"  title="ikebana japonais">&nbsp;</a>


Message édité par hlelong le 06-10-2005 à 17:02:27
Reply

Marsh Posté le 06-10-2005 à 16:11:27   

Reply

Marsh Posté le 06-10-2005 à 17:36:30    

Salut,
 
un lien est par défaut un élément inline, c'est à dire que sa taille varie en fonction du contenu ; les propriétés width et height n'ont donc aucun effet.  
 
Pour définir la taille il te faut mettre ceci :  
 

Code :
  1. display:block;


 
Et tu peux virer ton padding-left.
 
Sinon une petite remarque... le fait d'utiliser 2 images différentes pour un rollover est une mauvaise idée : si le curseur passe sur ton lien avant que la 2° image n'ait été chargée rien ne s'affichera. Il vaut mieux utiliser une seule image contenant les 2 états, et décaler le background pour le hover avec la propriété background-position..


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
Reply

Marsh Posté le 06-10-2005 à 18:42:02    

un rollover doit plutot etre fait en utilisant la techinique des portes coulissantes. en gros tu décale le background lors du hover

Reply

Marsh Posté le 07-10-2005 à 09:10:41    

Salut  :hello:  
 
pour éviter le pré-chargement des images j'utilise une technique vu sur Alsacréations (je pense que c'est la même que Gatsusat) et que j'ai évoqué sur un autre forum >>ici<<.
 
 [:fafane84]

Message cité 1 fois
Message édité par fafane84 le 07-10-2005 à 09:12:27

---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 07-10-2005 à 09:13:38    

gatsusat a écrit :

un rollover doit plutot etre fait en utilisant la techinique des portes coulissantes. en gros tu décale le background lors du hover


 

fafane84 a écrit :

Salut  :hello:  
 
pour éviter le pré-chargement des images j'utilise une technique vu sur Alsacréations (je pense que c'est la même que Gatsusat) et que j'ai évoqué sur un autre forum >>ici<<.
 
 [:fafane84]


 
 :ange:  :D


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 07-10-2005 à 09:17:21    

Appelle moi dieu !


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 07-10-2005 à 09:17:58    

gatsusat a écrit :

Appelle moi dieu !


 
 [:the real moins moins]


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed