Country / Dev

La technique présentée ici a peut être été déjà exploitée ailleurs, si vous avez des liens vers des articles qui en parlent merci de m’en faire part

On as tous eu ça à faire en CSS : remplacer du texte (généralement un titre) par une image.

Il existe un bon paquet de techniques pour faire cela :

• span avec un display:none (déconseillé)
• la propriété CSS clip (nécessite un hack pour IE)
• sIFR : remplacement avec du javascript + flash (un peu bourrin à mon goût)
• text-indent négatif sur le texte (sûrement la plus répandue car la plus simple à mettre en oeuvre)
• un simple tag img (le plus accessible, mais ne sépare par le contenu de la présentation)
• etc.

Jusqu’à maintenant j’utilisai la technique tu texte-indent qui est très efficace. Mais elle possède le même défaut que les autres techniques à base de CSS à savoir : si les images sont désactivées (et pas le CSS) aucun texte n’est affiché.

J’ai pensé à une technique où ce serait l’image qui cacherait le texte et que donc dans le cas où l’image serait manquante alors le texte resterait visible.

On commence avec un titre tout ce qu’il y a de plus classique :

<h1>Shibby</h1>

Seulement nous allons avoir besoin de 2 éléments : le titre et un élément qui viendra se placer par dessus lui afin de masquer le texte. Nous rajoutons donc un

span

<h1>Shibby<span></span></h1>

Nous allons positionner le titre en position relative, ainsi il nous sera aisé de placer le span à l’intérieur de celui-ci :

h1 {  position:relative; }

Le span quand à lui sera en position absolue et placé en haut à gauche

h1 span {  position:absolute;  top:0;  left:0; }

L’image de remplacement sera en image de fond tu span, le

h1

h1 {  position:relative;  width:185px;  height:35px; } h1 span {  position:absolute;  left:0;  top:0;  background: url(shibby.png) no-repeat left top;  width:100%;  height:100%; } 

Et voila notre titre stylé :

Images activées :

Shibby

Images désactivées :

Shibby

Cette technique n’est bien sûr pas exempt de défauts (ça serait trop beau) :

• Impossible de sélectionner le texte lorsque l’image est absente (on a un élément « transparent»  par dessus qui empêche la sélection)
• Ajout d’une balise
  supplémentaire dans le code
• Il se peut que le texte « dépasse»  derrière l’image, un simple overflow:hidden empêchera que cela ne se produise mais tronquera alors le texte lorsque les images seront désactivées.
• Edit 21/04/2007 : Comme on me l’a fait remarquer dans les commentaires, cela pose aussi problème si l’image utilisée est en partie transparente (on risque de voir le texte à travers).

Ce n’est bien sûr pas la solution ultime pour le remplacement d’image (qui ne viendra vraisemblablement qu’avec CSS3) mais elle a l’avantage de pouvoir afficher le texte même lorsque les images (mais pas le CSS) sont désactivées.