Version complète: sur le forum Webmaster Hub : probleme de roll-over
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
kinglomz
ben voila,
j'ai enfin trouve une source de financement pour mon studio. je debute a peine les gars (et les filles biggrin.gif ). j'ai maintenant mon site (.com en plus !) http://www.studioarea51.com mais comme toujours, j'ai ce probleme avec les roll-overs. je trouve que ca prend trop de temps avant que l'effet se fasse. n'y a-t-il pas d'autres moyens de faire les roll-overs ? ou comment charger les images dans le cache du visiteur pour que l'effet soit instantane quand celui-ci passe la souris dessus. merci encore.
Country
Voir l'excellente traduction de pompage.net :

Sprites CSS : Meurs, découpe d’images, meurs !

En gros :
L'astuce consiste à ne mettre qu'une seule image en background et au survol (:hover) de changer sans position afin d'afficher la 2nd partie de l'image pour réaliser un effet de survol. Et comme il ne s'agit que d'une unique image qui est affichée dès le chargement de la page, aucune mise en caché préalable n'est nécessaire (et tout ça sans JS) wink.gif
jeanpierre949
Bonjour.
Le code css ne marche pas avec IE sauf sur les liens si tu n'as pas de href pas de roll-over
Xavier
Pas le moindre texte alternatif sur les images... ton site n'a aucun contenu sad.gif

Pense un minimum à l'accessibilité wink.gif
Country
CITATION(jeanpierre949 @ dimanche 25 septembre 2005, 08h25)
Bonjour.
Le code css ne marche pas avec IE sauf sur les liens si tu n'as pas de href pas de roll-over
*


En effet, mais ici l'effet est appliqué à des liens donc pas de problèmes wink.gif

Exemple d'application de l'effet roll-over :

CODE
#bouton { width:206px; }
#bouton a:link, #bouton a:visited {
    display:block;
    height:44px; /* Hauteur de l'image */
    text-indent:-9000px; /* Cache le texte du lien */
    text-decoration:none;
    background:url(entrez.gif) no-repeat;
}
#bouton a:hover, #bouton a:active {
    background-position:0 -44px;
}


CODE
<div id="bouton"><a href="index2.html">Entrez</a></div>


Et l'image entrez.gif :

http://img381.imageshack.us/img381/2420/entrez7iz.gif
kinglomz
merci les gars, je vais essayer et surtout a Xavier pour sa remarque.je vais y remedier
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.