Une image réactive en CSS avec une seule image et sans javascript

Tutoriels par catégories

Trousse à outils

AlsaQuiz

Partenaires

Fil rss 1.0

Une image réactive en CSS avec une seule image et sans javascript

Le 08-04-2005 par Collectif Alsacreations dans Tutoriels et articles divers.

Ce petit tutoriel simple vous explique comment réaliser un menu codé en xhtml et mis en forme grâce aux css, le menu réagit au passage de la souris pour laisser apparaître une nouvelle image de fond.

L'avantage de la méthode utilisée ici, est de n'utiliser qu'une seule image contenant l'état normal et l'état survolé. Ceci permet de découvrir l'image instantanément après le passage de la souris, l'image étant chargée une bonne fois pour toute dès l'affichage de la page.

Idée originale de la technique présentée ici : http://wellstyled.com/css-nopreload-rollovers.html, cette technique est aussi grandement utilisée par Dave Shea dans son exemple des « sprites », article traduit sur pompage.net.

1^ère étape : le code xhtml

NOTE : Ce code présente un menu (liste de liens), mais rien ne vous empêche de l'appliquer à un lien unique en adaptant le tutoriel.

Le code xhtml pour un menu est généralement toujours le même à peu de choses près :

<ul id="menu">
	<li><a href="#">item n°1</a></li>
	<li><a href="#">item n°2</a></li>

	<li><a href="#">item n°3</a></li>
	<li><a href="#">item n°4</a></li>
	<li><a href="#">item n°5</a></li>

</ul>

Rien de bien extraordinaire ici, une liste non ordonné contenant des liens hypertextes. En xhtml, il n'y a jamais rien d'extraordinaire, la plupart des choses se passent dans les css, que nous allons voir juste après.

2^ème étape : le code css

Je vous laisse suivre les explications contenues dans le code en commentaire (/* … */).

ul#menu
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li
{
	margin: 0 0 5px 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 170px ;
	line-height: 30px ;
	color: #000 ;
	text-indent: 40px ; /* On décale le texte de 40px du bord gauche */

	text-decoration: none ;
	background: url(bg_menu.gif) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 1px solid #dbd ;
}

ul#menu li a:hover
{
	background: url(bg_menu.gif) no-repeat 0 -30px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 1px solid #f97 ;
}

3^ème étape : l'image utilisée

L'image utilisée contient l'état normal et l'état survolé (Il n'y a ici qu'une seule image !) :

Image de fond du menu

Et pour finir, vous pouvez voir ici le résultat final.

Variante : le texte du lien est masqué

Les liens que nous avons proposés contiennent tous du texte de contenu, ceci afin de préserver l'accessibilité de cette technique : en effet, si ce texte est absent et que les CSS ne sont pas activés, il n'y aura plus aucun contenu ni lien actif pour l'utilisateur.

Il est cependant possible de masquer ce texte en CSS de façon à ce qu'il demeure présent dans le code HTML, mais invisible sur les navigateurs graphiques.

Pour cela de nombreuses techniques ont été déployées mais chacune ayant ses lacunes. Vous trouverez sur le billet suivant une explications sur ce point ainsi que des pistes à suivre : Remplacement d'image, halte au display none. Bonne lecture.