Une liste avec des images différentes en rollover [résolu]

Bonjour à tous, et un bravo de plus pour le travail que vous faites,
de la part d'un nouvel adepte des standards, en partie grâce à vous...

Je bute sur une adaptation de la méthode de menu rollover en CSS que vous présentez dans un tutoriel (et qui m'a conquis):

j'ai un sommaire constitué d'une longue liste de liens, tous représentés par une image réactive, différente d'un lien à l'autre.

Je n'ai pas trouvé de solution qui m'éviterait de rentrer toutes mes images dans le code CSS, pour ne pas le surcharger, et pour pouvoir ajouter ultérieurement des liens sans passer par le CSS.
Y-aurait-il un moyen de spécifier dans le CSS de la balise lien (ou peut-être une autre) un décalage en pixels lors du survol, et de mettre l'URL de mes images dans le HTML?
Ou peut-être que je me trompe d'outil...

Je vous remercie d'avance de l'attention que vous pourriez accorder à ce message...
Modifié par norman gratuit (11 Aug 2008 - 01:33)

norman gratuit a écrit :
Y-aurait-il un moyen de spécifier dans le CSS de la balise lien (ou peut-être une autre) un décalage en pixels lors du survol

Non. Tu ne peux utiliser les pseudo-classes :hover (survol par le pointeur de la souris) et :focus (focus lors de la navigation au clavier) que dans une feuille de styles, pas dans un attribut style d'un élément HTML.

norman gratuit a écrit :
et de mettre l'URL de mes images dans le HTML?

Ça oui, ça peut se faire.

Imaginons que dans ton CSS tu as un style comme ceci:

#menu a {
	display: block;
	width: 300px;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#menu a:hover, #menu a:focus {
	background-position: -300px 0;
}

(Cela suppose que tu as compris la méthode expliquée dans le tutoriel que tu évoques, et que tu sais à quoi correspond ce -300px et de quelle manière tu dois construire tes images à deux états...)

Côté HTML, tu peux faire:

<a style="background-image: url(images/menu/blabla.png);">Bla bla</a>

Mais bon, à moins que ça ne change tout le temps ça n'a pas un grand intérêt.

En passant, je rappelle que faire un menu avec des liens dont le seul intitulé est un texte contenu dans une image de fond en CSS, ben c'est pas bien. L'intitulé du lien doit être dans le code HTML, du moins si on cherche à faire un menu plutôt accessible et des liens que les moteurs de recherche suivront.

Merci pour toutes ces informations, effectivement, je suis dans une configuration un peu tordue, ces liens ne changent pas tout le temps, mais à chaque mise à jour je suis amené à en ajouter et/ou à en retirer, c'est pour ça que je cherchais une solution avec les URL hors de la feuille de style.
J'ai l'impression que la solution que tu me présentes est adaptée à ce cas de figure, en tout cas elle va me simplifier la tâche.

merci encore