Créer des images de fond cliquables

Faire en sorte qu’une image soit cliquable n’a rien de compliqué : il suffit de l’insérer dans un lien. Le problème survient si vous voulez que ce soit une image de fond qui soit cliquable : en gros, nous allons voir comment créer des liens « vides » ! Mais pas n’importe comment, il faut penser à l’accessibilité alors nous allons voir ici la bonne méthode.

Nous allons construire ce tutoriel autour d’un exemple, à savoir la création d’un bouton accueil semblable à celui-ci :

Déjà, il nous faut un lien, et ça on sait faire :

Accueil

L’id est là pour être référencé dans le CSS… Ce n’est sûrement pas votre seul lien ! Maintenant, tout va se jouer dans ce CSS. Votre image possède des dimensions spécifiques qu’il va falloir indiquer, et pour ça, votre lien doit être un block. Vous pouvez ensuite indiquer l’image de fond :

#accueil {
	display: block;
	width: 50px;
	height: 50px;
	background-image: url('./accueil.png');
	background-repeat: no-repeat;
}

Bien sûr, le fond peut être n’importe quoi, répété, etc. Il reste un petit problème à régler : faire disparaître le texte. Pour information, s’il est là, c’est uniquement pour une question d’accessibilité : si des personnes malvoyantes viennent voir votre site, il est important qu’elles aient un lien non vide qui ne représenterait rien pour un lecteur d’écran… Pour que le lien soit vraiment vide, donc, il suffit de faire sortir le texte de la zone délimitée par l’image. La méthode la plus simple de faire ça, c’est de mettre un text-indent dont la valeur est la largeur de l’image. Mais ça ne suffit pas, il faut aussi ajouter une valeur hidden à overflow pour dire qu’on ne veut pas que ce qui ressort de notre cadre apparaissent.

#accueil {
	display: block;
	width: 50px;
	height: 50px;
	background-image: url('./accueil.png');
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 50px;
}

Et voila, vous avez votre image de fond cliquable ! Ça a plusieurs avantages : modifier l’image au survol de la souris sans JavaScript, la possibilité d’avoir plusieurs thèmes et de changer cette image en fonction de ces thèmes, etc. Le code donné ici est minimal, vous pouvez ajouter des détails comme un border-radius par exemple, ou même plusieurs images de fond !