Astuce : lien avec texte caché

Bonjour,

je suis tombé sur ce sujet et j'ai voulu réagir mais il etait fermé.

Voici comment je procède :

je fais un lien image, mais l'image utilisée est un pixel transparent en png8 (ou gif).

 <a href=""> <img src="vide.png" alt="texte du lien" /> </a>  

a{ 
background : transparent url(image-1.png) no-repeat; 
}
a:hover{ 
background-image : url(image-2.png); 
}
a img{
width:50px;
height:60px; //taille des images de fond
border:none;
}

Que pensez vous de la validité de ma solution ?
Modifié par peha (16 Sep 2008 - 18:16)

Waouh, tu viens de ressortir un sujet qui a... plus de 3 ans !
Alors, le sujet de départ était :

a écrit :
Comment rendre des images de fond accessibles en masquant le texte alternatif aux navigateurs non graphiques ?

Et... euhm..., j'avoue avoir du mal à comprendre la solution envisagée.
A quoi sert l'arrière-plan du lien si tu définis la taille de l'image contenue dans le code html comme étant équivalente aux dimensions de l'image d'arrière-plan ?

Hello,

Compris la technique pour ma part. C'est une technique connue que l'on peut trouver référencée dans plusieurs articles, et qui comme toutes les techniques du genre (techniques de remplacement d'images) a ses limites. Ici, la limite est qu'avec les styles CSS désactivés, ou si seule l'image de fond n'est pas disponible, le texte du lien ne sera pas visible.

Pour rappel, la technique la plus robuste consiste à utiliser l'image que l'on souhaite afficher directement dans le code HTML (élément IMG), avec un texte alternatif qui va bien, et à faire les éventuels effets de rollover en JavaScript.
Modifié par Florent V. (16 Sep 2008 - 19:32)

Florent V. > Merci pour l'explication,
c'est bien ce que j'étais venu chercher

Javascript donc.

Cygnus > l'arrière plan indique où mène le lien pour les navigateurs graphiques, et a l'avantage de réagir au survol.
L'image n'a ici d'intérêt que pour sa balise alt= qui indique le texte de substitution.