Aujourd’hui, on va faire du html, et du css. Pas d’asp, pas de JavaScript, on fait du web pur et dur. Je vous propose de faire un effet de roll-over sur une image.
Alors je vous entend tous râler, comme quoi c’est trop simple, qu’on a 10000 codes sources qui fonctionnent sur Google, et que je vous avais habitué à mieux. Certes, on a des codes sources qui fonctionnent, mais ils ne sont pas toujours très propres… Comme j’ai dis en introduction, on va faire ici un roll-over uniquement avec du css, pas de javascript. Et petit bonus, ma technique va éviter un problème qu’on rencontre souvent sur des images en roll-over : pas besoin d’attendre que la souris passe sur l’image pour charger la seconde image.
Mais fini de papoter, voyons comment faire :
Pour commencer, il me faut mes deux images : celle affichée normalement, et celle affichée lorsque la souris passera dessus. Et attention, c’est là qu’est toute l’astuce, on va mettre le 2 dans un seul fichier image, comme ça :
(je n’accepterai aucune remarque sur le bon goût de mes images, et je rappelle que je n’ai jamais prétendu être designer ;)
Maintenant, on va afficher ça dans notre page. D’un point de vue HTML, on va tout simplement faire un lien (pas de balise <img> ici) :
<a class="rolloverLink" href="journuit.html">
aller vers la page jour / nuit</a>
Et on va afficher notre image à l’aide de CSS. Pour ça, on a plusieurs étapes :
- Faire passer le lien en affichage de type block, et définir sa taille de manière à n’afficher que la moitié de notre fichier image.
- Mettre l’image en fond, et l’aligner en haut.
- Sur le hover, changer l’alignement pour qu’on voie l’autre moitié de l’image.
- Et pour ne pas qu’on voie le texte, on va le décaler loin en dehors de la page. Notez qu’il est tout de même important de laisser un texte pour des raisons d’accessibilité (pensez aux mal-voyants qui utilisent des navigateurs spécifiques)
On a donc notre CSS :
a.rolloverLink
{
text-indent:-10000px;
display:block;
width:80px;
height:50px;
background-image:url('rollover.png');
background-position:top;
}
a.rolloverLink:hover
{
background-position: bottom;
}
Ce qui nous donne le résultat suivant :
aller vers la page jour / nuit
Un grand merci à Jocelyn, responsable du domaine métier SWA (Solutions Web Avancées) chez Bewise, pour l’astuce !