Comment supprimer le blanc lors d’un hover sur un(e) bouton/image ?


Posté le 2 Juil 2013 dans la catégorie css.

Vous créez un site internet et vous désirer personnaliser le menu en utilisant des images. Vous réalisez donc deux versions du bouton : un état normal et un état pour le hover (passage de la souris sur le bouton).

boutons

L’effet marche comme vous le souhaitez. Seulement lorsque vous ouvrez de nouveau votre site pour tester les boutons, vous vous rendez compte qu’il y a un blanc de quelques secondes entre le passage à l’état normal et le hover (cf. exemple).

bug bouton hover css

Exemple.

Cela est du au chargement des images utilisées : lorsque votre souris passe sur le bouton à l’état normal il y a un petit temps de chargement de l’image choisie pour le hover. Cela n’est pas très esthétique… Je vais donc vous donner une astuce et vous expliquer comment configurer votre CSS pour ne plus avoir cet espace le temps du chargement de l’image.

 

1. Image(s)

Tout d’abord vous devez regrouper vos deux images en une seule et même image. Cela permettra aux navigateurs de charger les deux images en même temps et d’éviter le blanc entre.

assemblage des 2 boutons.

Assemblage des 2 boutons.

Nous allons maintenant voir comme configurer le CSS pour que ces images puissent se déplacer lors du hover.

 

2. Configuration du CSS

Pour commencer il faut créer le style CSS des boutons pour l’état normal (a) et l’état hover (a:hover). Vous pouvez regrouper les deux états dans un même style CSS car les éléments resteront les mêmes. Seul un élément changera.

#menu-contact a,
#menu-contact a:hover {
background-image    : url("../menu-contact.png");  /* Chemin vers votre image. */
background-repeat    : no-repeat; /* On annule toute répétition de l'image.  */
width                : 73px; /* Largeur de l'image. Attention à bien noter la largeur d'une seule image et non la largeur de l'image assemblée */
height               : 32px; /* Hauteur de l'image. */
display              : block; /* Faire du lien un élément du type block. */

}

Ensuite Il faudra ajouter l’option qui permet le déplacement de l’image lors du hover.

À l’état initial on rendra visible la première image. Elle doit donc être positionnée à 0% en abscisse et 0% en ordonnée.

#menu-contact a {
background-position-x: 0%;
background-position-y: 0%;
}

Cela correspond à un positionnement de l’image en haut à gauche.

#menu-contact a {
background-position    : left top;
}

Lors du hover on veut que toute la deuxième image se décale vers la droite. On aura donc un positionnement de 100% en abscisse et toujours de 0% en ordonnée car la hauteur ne change pas.

#menu-contact a:hover {
background-position-x: 100%;
background-position-y: 0%;
}

Cela correspond à un positionnement en haut à droite.

#menu-contact a:hover {
background-position    : right top;
}

 

Maintenant c’est à vous de tester.

Une réflexion au sujet de « Comment supprimer le blanc lors d’un hover sur un(e) bouton/image ? »

  1. Ping : Comment mettre une image entiere à la place d'un lien ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *