Cet article a été publié sur le site graphuccino.com
Je tombe souvent sur des sites au webdesign très travaillé, avec de jolis boutons en guise de navigation. Que j’apprécie ou pas le webdesign du site en question, je trouve toujours regrettable qu’un effet de rollover mal conçu vienne tout gâcher… vous ne voyez pas de quel type de défaut de conception je parle ? Survolez donc les boutons ci-dessous, pour voir de le problème de l’exemple 1 (videz le cache de votre navigateur si vous l’avez déjà survolé) :
Exemple 1
Exemple 2
1) Explications
Bien sûr, ce petit raté ne sera visible que lors du 1er survol du bouton. La raison est simple : Dans le 1er exemple, le bouton est composé d’une image chargée en CSS. Cette image correspond uniquement à l’état « normal » du bouton (au repos, sans survol). Lors du chargement de la page, le navigateur charge toutes les images qui doivent être affichées, mais bien sûr pas toutes les autres images présentent dans le répertoire de votre site, mais pas affichées. Lors du survol du bouton de l’exemple 1, la CSS indique au navigateur l’affichage d’une nouvelle image, celle qui correspond à l’état « survol » de votre bouton. Le navigateur, qui n’a pas chargé cette image lors du chargement de la page (puisqu’elle n’était pas affichée), va devoir la charger au moment du survol. Et même si les connexions modernes sont souvent très rapides, vous aurez toujours au mieux un léger effet de saccade lors du survol, et au pire un réel temps de latence… c’est un détail certes, mais dans le webdesign, et surtout en intégration, ce sont les finitions qui font toute la différence entre un site réussi et un site plus banale.
2) Solution
La solution semble évidente : il faut réussir à charger les images de rollover dès le chargement de la page. Il existe plusieurs méthodes, mais la plus simple et la plus propre est certainement la suivante. Il faut bien préciser que cette technique ne s’applique qu’aux images chargées par CSS (oubliez donc vos images HTML).
Dès la phase de webdesign, il faut prendre en compte les problématiques d’intégration. Ainsi, il faut penser à assembler les 2 états (normal et survolé) de chaque bouton sur une seule image. Pour celà , je vous conseille de suivre le précédent tutoriel de graphuccino : « Un effet de rollover sur vos boutons ».
Une fois votre image prête, il va falloir effectuer un léger travail CSS.
Ce que nous voulons :
1 – Que notre image, qui fait le double de la hauteur réelle de notre bouton soit affichée correctement à l’état normal. Pour celà , nous utiliserons simplement les propriétés CSS de dimension pour spécifier la taille à afficher.
2 – Que lors du survol, l’image normal sorte du « champs » de notre bouton pour laisser place à la partie de l’image au survol. Et nous utiliserons pour cela les propriétés de position de l’arrière plan.
Voici donc ce que celà donne en CSS et HTML, en partant du principe que notre bouton doit faire 150px de large et 80px de haut :
Le HTML
<a href="" title="Acheter" id="notreBouton">Acheter</a>
Et le CSS
#notreBouton {display:block; width:150px; height:80px; background:url(/notre-image.jpg) no-repeat 0 0;}
#notreBouton:hover {background:url(/notre-image.jpg) no-repeat 0 -80px;}
La propriété « display:block; » permet de stipuler au navigateur que notre balise « <a> » doit être considérée comme un bloc (au lieu d’une balise en ligne). Cela nous permet de donner des dimensions à notre lien. Il est important de bien penser à donner une hauteur égale à la moitié de notre image ( »height:80px; »). Pour finir, nous indiquons que notre lien aura pour image d’arrière plan « notre-image.jpg », qui ne sera pas répétée, et qui sera placée au haut à gauche de notre lien ( »background:url(/notre-image.jpg) no-repeat 0 -80px; »). Lors du survol du lien ( »#notreBouton:hover »), nous stipulons au navigateur que la position de l’image d’arrière plan doit changerde 80px, pour permettre d’afficher la partie au survol qui était cachée jusque là ( »background:url(/notre-image.jpg) no-repeat 0 -80px; »). C’est aussi simple que ça !
Tags : css
