Afficher une image au lieu d’un texte (en CSS)

Remarque liminaire : La technique suivante ne devrait être utilisée que dans des cas très précis, nous aurons l’occasion d’en aborder certains prochainement.

Condition : Le texte doit être délimité par une balise HTML (<span> ou une autre).

Exemple:

<div class="headerMain">
  <h1><a href="https://www.vdigital.org/sharing">Qu&#039;une petite étincelle brille au fond de vos yeux !</a></h1>
</div>

Quelques uns des avantages de cette astuce :

– L’absence de script assure un affichage immédiat avec les autres éléments de la page.
– Le HTML d’origine reste simple, sans aucune modification.
– S’il s’agit d’un lien, il demeure utilisable.
– Pour les moteurs de recherche, le texte étant présent c’est lui qui est analysé et référencé.
– En contre partie, l’image ne sera pas référencée.

Cas de remplacement :

.headerMain h1 a, .headerMain h1 a:visited, .headerMain h1 a:hover {
  background:url(../../local/images/blog_entete.png) no-repeat scroll 0 0 transparent;
  display:block;
  font:bold 0pt/0px Arial;
  height:185px;
  outline:0px;
  width:388px;
}

Explications:

  1. background:url(../../local/images/blog_entete.png) no-repeat scroll 0 0 transparent;
    Indique l’image à utiliser. Éventuellement des « class » différentes permettront de changer une image par une autre, n’abusez pas de ces changements dans vos pages pour autant ou assurez vous que le poids de celles-ci reste raisonnable.
  2. display:block;
    Transforme l’affichage en ligne (inline) en affichage par bloc (block).
  3. font:bold 0pt/0px Arial;
    L’élément principal de l’astuce : la police des caractères (font) aura une taille nulle et la hauteur des lignes sera également à zéro.
  4. height:185px;
    Hauteur de l’image.
  5. outline:0px;
    Dans le cas d’un lien, ce paramètre élimine le contour en pointillé lors du clic.
  6. width:388px;
    Largeur de l’image.

Démonstrations :

<div id="example-img-iso-text"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in vehicula lorem. Morbi bibendum viverra sem id malesuada. Fusce eros velit, aliquet id fringilla at, adipiscing vitae quam. Praesent pretium malesuada egestas. Vivamus blandit aliquet quam, at pellentesque ante dignissim non. Mauris id nisi magna, eget fermentum metus. Mauris varius tristique turpis vitae dignissim. Phasellus tempor eleifend diam nec mollis! Ut ornare lorem vel augue molestie sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p></div>

Exemple concret :


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in vehicula lorem. Morbi bibendum viverra sem id malesuada. Fusce eros velit, aliquet id fringilla at, adipiscing vitae quam. Praesent pretium malesuada egestas. Vivamus blandit aliquet quam, at pellentesque ante dignissim non. Mauris id nisi magna, eget fermentum metus. Mauris varius tristique turpis vitae dignissim. Phasellus tempor eleifend diam nec mollis! Ut ornare lorem vel augue molestie sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Plus classique, le même texte avec en arrière plan une autre image (sans le paramètre font:bold 0pt/0px Arial;) :


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in vehicula lorem. Morbi bibendum viverra sem id malesuada. Fusce eros velit, aliquet id fringilla at, adipiscing vitae quam. Praesent pretium malesuada egestas. Vivamus blandit aliquet quam, at pellentesque ante dignissim non. Mauris id nisi magna, eget fermentum metus. Mauris varius tristique turpis vitae dignissim. Phasellus tempor eleifend diam nec mollis! Ut ornare lorem vel augue molestie sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

8 thoughts on “Afficher une image au lieu d’un texte (en CSS)

  1. On peut avoir le même avec l’image ? 😉

    Je ne connaissais pas cette syntaxe de l’attribut ‘font’, j’ai appris quelque chose, merci !
    Par contre, j’utilise habituellement une couleur de police ‘transparent’ plutôt que de modifier la taille de la fonte et la hauteur de ligne.

    1. 😉
      color: transparent;
      Cela fonctionne mais… De mémoire, certains navigateurs corrigeaient la couleur à une époque.
      Plus encore cela peut poser des problèmes car dans les options d’ergonomie, en fonction de son handicap, le mode contraste élevé transforme la couleur transparente en blanc.
      Alors que la taille de la font et la hauteur de ligne à zéro ne changeront pas (Cf. « Ctrl++ » ou Crtl+roulette de souris).
      😉

  2. J’ai placé effectivement le chemin absolu pour la démo (laquelle n’utilise pas un fichier .css mais la balise style).
    Merci. 😉

  3. tres interessante cette astuce ! merci 😉
    mais le poids et la police sont ils vraiment important dans : font:bold 0pt/0px Arial; ?

  4. Bonjour Pierre,

    Tout à fait important, tu as deux exemples.
    L’un avec 0pt/0px, et l’autre sans.
    Conséquence, le texte est visible dans le second.
    Invisible dans le premier mais présent et référencé.

    D’autres techniques existent mais donnent des résultats beaucoup moins satisfaisant.

    L’objectif est d’avoir un meilleur référencement.
    Toutes les icones devraient suivre cette logique par exemple.
    Vincent

    1. en fait je pensais a « bold » et « arial » : « 0pt/0px » devrait etre suffisant non ?
      y’a t’il une raison de le spécifier ?

  5. La forme réduite de la directive peut être interprétée différemment par les navigateur.
    Effectivement bold ne serait pas nécessaire à priori.
    Arial (font-family en réalité) et si je lis correctement la syntaxe officielle serait la clause minimale, et donc me semble indispensable.
    Je n’ai pas fait les tests sur les principaux navigateurs actuels donc je ne peux pas t’en dire plus.
    Rien ne t’empêche de tester une forme réduite à la syntaxe:
    0px/0px ou 0pt/0pt voire 0/0.
    Merci de nous rapporter tes résultats.

Comments are closed.