Lien graphique avec rollback : référencement?

[Helldream]

Bonjour,

J'aimerais créer un menu graphique utilisant des images changeant si le curseur passe dessus. J'ai vu que c'était faisable avec du css comme cela :

<a href="accueil.php" id="btn_accueil">&nbsp;</a>

a#btn_accueil
{
	left: 7%;
	background: url("/medias/btn_accueil.png") no-repeat top;
}

a#btn_accueil:hover
{
	background: url("/medias/btn_accueil2.png") no-repeat top;
}

Mon soucis est qu'il me semble que cela pose problème au niveau du référencement et de l'accessibilité :
- N'ayant pas de texte entre les balises <a></a>, ce n'est pas super pour le référencement (lien vide)...
- Si les images ne s'affichent pas pour une raison quelconque (moteur textuel, lien mort, bug, ...), on ne peux pu naviger sur le site
- On pourrait utiliser un <span>texte du menu</span> avec un css du genre "visibility: hidden", mais ça ne changera rien en cas d'image ne s'affichant pas
- On pourrait mettre le texte du menu sur le fond du bouton, mais dès qu'on zoom, forcément le texte dépasse du bouton, et ça ne ressemble plus à rien...

Existe-t'il un moyen de faire un bouton graphique avec rollover qui ne pose pas ces soucis?

Merci d'avance pour vos réponses!


PS : Il semblerait qu'un bon compromis pourrait être l'utilisation du javascript : pas de rollover si ce dernier est désactivé, mais dans tous les cas des images avec balise alt et donc un menu accessible et référencable... Que pensez-vous de cette solution?

 

[bproductiv]

et pourquoi ne pas mettre un texte et une image de background pour ton roll over, c'est que tu utilise une police spéciale?

 

[Helldream]

Voici 3 points génant, si on dissocie image et texte :
- En cas de grossissement de la police (taille du texte pour une personne qui a du mal à lire), le texte sortira forcément de l'image, ce qui n'est pas très propre...
- Toujours dans ce cas, on peut avoir un soucis de contraste entre le fond de page (clair), et le texte du bouton (qui lui aussi pourrait être clair, si le fond du bouton est foncé)
- Si on veux mettre des effets sur le texte (ombre par exemple), cela n'est pas faisable.
- En cas de police travaillée (comme tu le disais), en effet on ne peux pas non plus l'utiliser.


J'essaie de trouver une solution qui soit le meilleur compromis entre rapidité de mise en oeuvre (par 1 page de code pour 1 malheureux bouton), accessibilité, et "référencabilité".

 

[bproductiv]

il faut faire tes boutons avec le système de portes coulissantes.
http://www.ultra-fluide.com/ressources/ ... nglets.htm
http://www.developpement-web.net/astuce ... ts_images/
plus d'exemple sur google : portes coulissantes css

 

[e-kiwi]

sinon tu le fais en js c est pas si grave ...