Rollover à une seule image

Publié le par Francisek

Vous connaissez certainement l'effet de rollover qui consiste à subsituter une image de fond survolée par la souris avec une autre image. Cet effet permet d'ajouter de l'interacivité à votre site, et est très souvent utilisé pour animer des boutons.
Plusieurs techniques permettent d'obtenir cet effet, du simple code HTML (non conforme XHTML) à l'utilisation du javascript.
Ces méthodes traditionnelles présentent cependant des désavantages:
  • avec de petites connections (modem par exemple), l'image de substitution peut ne pas être chargée à temps. Le palliatif traditionnel est de précharger l'image par javascript ou HTML (dans un élément invisible), ce qui a pour effet de multiplier les transactions avec le serveur d'images.
  • si vous changez ou déplacez une image, vous devrez penser à aussi modifier la deuxième image.
  • lorsque le javascript est désactivé, il n'y a plus de rollover.
Saviez-vous que par une petite astuce, on peut obtenir le même effet en CSS et ce avec une seule image? Ainsi vous réduirez la charge des serveurs et faciliterez la maintenance de votre site en ne modifiant plus qu'une seule image.
L'astuce est simple. Prenons le cas d'une image-bouton de 100x100px qui changera de couleur lorsqu'elle sera survolée par la souris. Traditionnellement, nous écririons le code HTML suivant pour afficher l'image dans un lien:
<a href="#" title="bouton"><img src="bouton1.gif" alt="bouton" width="100" height:"100"/></a>

bouton


Le CSS nous permettant d'appliquer une image en fond d'un élément, nous pouvons aussi écrire ce code équivalent:
<a href="#" title="bouton" style="display:block;background-image:url(bouton1.gif);width:100px;height:100px"></a>


et encore mieux, en séparant le fond de la forme:
<a id="monBouton" href="#" title="bouton"></a>

pour le HTML et
#monBouton {
display:block;
height:100px;
width:100px;
background-image:url(bouton1.gif);
}

pour le CSS.

Tout cela est bien beau, mais nous n'avons pour le moment qu'une image qui ne fait pas de rollover. Nous y venons...
Si l'on considère que le CSS permet à la fois de positionner une image de fond, de masquer une partie du contenu et d'agir au passage de la souris sur un lien, nous concluons qu'il suffit de fusionner les deux images du bouton en une seule, l'une au dessus de l'autre par exemple, et d'utiliser à bon escient ces fonctionnalités pour obtenir notre effet de rollover.
Deux images de 100x100 deviennent ainsi une seule image de 100x200:

bouton1.gif
+

bouton2.gif
=

bouton.gif

Il ne reste plus qu'à modifier le CSS pour le bouton en postionnant l'image de fond et masquant le dépassement:
a#monBouton {
display:block;
height:100px;
width:100px;
background:url(bouton.gif) no-repeat 0 0;
overflow:hidden;
}
/* lien survolé: l'image est remontée de 100px */
a#monBouton:hover{
background:url(bouton.gif) no-repeat 0 -100px;
}

Publié dans CSS et Design

Commenter cet article

Davy 12/07/2007 15:58

je suis encore tout nouveau et je pige pas trop ! lol faudra bien m'expliquer ... parce que j'ai toujours pas piger sur le CSS

Francisek 14/07/2007 13:39

L'apprentissage du CSS est un chemin parsemé d'embûches. Il existe néanmoins de nombreux tutoriaux pour apprendre les bases. Mon article Bases du CSS et outil d'informations sur la structure DOM d'une page est une introduction à ce langage.
 

lili 04/07/2007 21:12

Diantre ! Je n'étais revenue depuis mon dernier message ... Je n'ai pas retenté le rollover, non plus !!!
Je suis bientôt en vacances. Je crois que je m'y attellerai à ce moment là !!!
Surtout si tu me dis que : un de fait dix de gagnés !!! Dis comme cela, je me sens pousser des ailes !

Les images sont masquées chez moi aussi ! Pourquoi ? Mystère et boule de gomme ... Mais tant mieux !

Merci - en retard - pour tes réponses, toujours agréables.

à plus, lili

Francisek 05/07/2007 23:37

Cela dit, j'ai lu que sous IE cette méthode était catastrophique puisqu'à chaque changement d'image IE recharge l'image.Et pas de soucis, j'accepte les merci en retard, vu que j'ai tendance à répondre moi aussi avec du retard...
 

lili 21/06/2007 10:05

C'est vrai que c'est pas mal !!!
Sauf que depuis chez moi, les images s'affichent à côté des noms et ne sont donc pas masquées dans le lien !!! Je suis sous IE sur cet ordi. Au boulot sous FF c'est OK et sous IE aussi !!! C'est joli malgré tout ... L'auteur des photos trouve cela très bien, alors ...mais pour moi c'est rageant !

Pour le rollover, je m'y remettrai. Mais déjà qu'avec un seul j'ai du mal, si tu me dis qu'il faut définir le comportement de chacune des id dans le CSS ...Aïe aïe aïe

Merci beaucoup pour ta présence - soutien et tes conseils.

à bientôt, lili

Francisek 22/06/2007 23:21

Pas de problème pour moi sous IE et FireFox, les images sont par défaut masquées. Pour les rollover, quand tu en auras un qui fonctionnera, les autres devraient vite suivre l'exemple !
 

lili 20/06/2007 17:08

Resalut ;-) !!!
J'ai appliqué une autre technique pour l'apparition d'image !!! C'est celle des liens !!!
Je suis super contente ! Grand bien me fasse ...OK ...
Bon, je râle toujours pour le rollover, mais bon ...
Si tu veux voir le résultat :
http://le-festival-de-cannes-de-cyril.over-blog.fr/article-10935232.html

à plus

Francisek 20/06/2007 20:10

Ben ça rend pas si mal !!
 

lili 20/06/2007 15:21

Salut ! Je consulte souvent tes pages pour tester de nouvelles applications. Surtout pour m'amuser, car je ne suis pas une pro du blog ! J'"entretiens" le blog de mon ami. Il y expose ses photos. Je voulais faire une présentation de rollover avec des photos. Après 50 000 essais divers et variés je n'arrive à rien. J'ai lu que l'on pouvait placer un rollover en mode source d'un article. Mais chez moi cela bugue dur dur dur.
Avant de baisser les bras - je lance un appel de détresse ... au cas où ...

merci dans tous les cas !

Francisek 20/06/2007 20:09

Le truc, c'est qu'il faut mettre des id à chaque rollover  et de définir le comportement de chacune dans le CSS. C'est un peu fastidieux mais ça fonctionne bien (à part sous IE qui bug quand même pas mal pour changer).