Remplacement de texte par une image en CSS

Attention, cet article a été déplacé dans les archives, donc le contenu peut ne plus être à jour. A vous de voir 🙂

Ayant vu de nombreuses techniques pour remplacer un texte par une image en CSS, je me permets de partager la mienne, qui ne m’a jamais fait défaut, avec les explications adéquates.

Mon texte alternatif
.irh3 {
	display : inline-block;
	width : 100px;
	height : 30px;
	overflow : hidden;
	text-align : left;
	text-indent : -9999px;
	white-space : nowrap;
	background : transparent url(http://lorempixel.com/100/50/) no-repeat top left;
}

Exemple :

Mon texte alternatif

Explications :

  • On commence par définir un type inline-block sur l’élément. Le display:block fonctionne aussi, mais j’ai plus souvent besoin du display:inline-block;.
  • On lui donne la taille de l’image interne, qu’on dispose en background.
  • Le text-indent va décaler le texte loin sur la gauche (ce dont on s’assure avec le text-align:left;), le white-space:nowrap; s’assurant qu’il soit sans retour à la ligne.
  • Le overflow:hidden évite que le texte soit éventuellement visible sur la gauche, s’il est trop long.

Je suis conscient que cette technique est assez lourde, mais elle a l’avantage de ne jamais m’avoir lâché : )

Partager cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  • C’est malheureusement le souci avec la plupart des variations de cette technique, mais c’est un point à améliorer, en effet.

  • J’utilise la même technique, mais j’ai tendance à me poser pas mal de questions, notamment sur l’utilisation des pseudos-éléments pour placer l’image devant, ainsi le texte serait visible en cas de désactivation des images. Sinon il y a aussi le fait de passer le texte en couleur « transparent » avec un font-seize petit (probleme IE6 pour le transparent). Les solutions sont nombreuses. Merci en tout cas pour le partage, j’ai appris le « text-align:left » que je ne mettais jamais… 😉

  • Mais à quoi sert de mettre une image comme ça à la place du texte ? Pour conserver l’avantage d’un point de vue SEO de mettre une balise H?

  • Dans le cas d’une mise en page trop poussée, tournée print, avec des effets et des exigences de navigateurs trop larges, avec une contrainte de temps trop faible …

  • Salut,

    J’utilise une technique à peu près similaire, mais j’ai récemment changé le -9999px en 110%.

    Ca évite de créer un énorme objet qui prend de la mémoire sous WebKit. L’amélioration est sensible quand on anime un objet.

  • Technique interessante, cependant cela ne fonctionnera pas sous IE7 pour des elements input genre « submit », « button », etc..
    Le fix etant de mettre une valeur a « text-transform » (uppercase, capitalize, etc.)

    Un fiddle pour le demontrer (a tester sous IE7): http://jsfiddle.net/tanguy/Y9Exb/

  • Intéressant !
    Je t’avoue que je ne skinne plus de boutons avec des images, donc je n’ai pas vraiment testé pour ça, on est vraiment dans l’idée d’un push image.

  • Puis-je te demander l’intérêt de remplacer un texte par une image en CSS et quel avantage par rapport à du HTML classique? En terme de référencement ça joue déjà en sa défaveur non?