28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bouton qui saute

Hug

voilà jai un petit pb d'affichage de bouton dans mon menu
lorsque l'on affiche pour la première fois mon site et que l'on positionne le curseur sur le bouton, le bouton disparait pendant une demi-seconde puis l'image du bouton a:hover apparait correctement Smiley ohwell

comment éviter se saut d'image entre l'image du bouton de base et l'image de survol lors du premier survol sur le bouton ?

le bouton de base pèse 1.5ko et celui du survol 3ko
mon site : www.prolixeserver.com
et le code source du style que j'ai mis pour les boutons:
/* menu */
.menu {
margin: 0 0 0 50px;
padding: 0;
border: 0 ;
text-decoration: none;
list-style: none;
height: 72px;
width: 550px;
}
.menu ul {
float: left;
display: block;
margin-top: 19px;
padding: 0;
border: 0;
height: 52px;
width: 350px;
text-decoration: none;
list-style: none;
}

/* bouton d'accueil */
#accueil a {
float: left;
height: 51px;
width: 55px;
background: url(../images/accueil1.png) no-repeat center top;
}
#accueil a:hover {
height: 51px;
width: 55px;
background: url(../images/accueil2.png) no-repeat center top;
}
...

merci de votre reponse Smiley cligne
Modifié par zcd (22 Jan 2011 - 19:33)
Hello !

As tu essayé de précharger l'image de ton bouton?
Pour éviter ce genre de désagrément, tu peux aussi utiliser une seule image pour les deux états de ton bouton (portes coulissantes).
slt

l'image double bouton oui javais déja tenté d'essayé mais je suis pas arrivé a le faire fonctionner correctement Smiley decu

par contre ton idée de préchargement m'interresse...
je vais aller voir sur le net comment sa fonctionne Smiley smile

merci ++
Le "double bouton", c'est très simple :

Si l'état non survolé tient dans un carré de 50 pixels par 50 pixels, et que ton état survolé fait la même taille, alors tu peux placer les deux états dans une seule image, de 50px de large, pour 100px de haut.

L'état non survolé va afficher ton image de 0,0 à 50,50 alors que l'état survolé va afficher de 0,50 à 50,100.

Pour précharger une image, tu peux l'intégrer dans une div bidon, qui aura un display:none.
Sujet clos
Aller à