Menu graphique avec rollover sans javascript ?

Bonjour, j'ai pris connaissance du tutoriel sur les menus graphique avec rollover.
Cette méthode permet de réutiliser une même image (composée de 2 images) pour chaque bouton avec le texte par dessus.
J'aimerais intégrer à l'image le texte car j'utilise une typo particulière, est-ce possible avec les css, d'avoir un code permettant de changer l'image à chaque bouton ?

J'utilise Javascript pour arriver à ce résultat mais préfèrerais m'en passer pour des raisons d'accessibilité.

J'espère être clair, si ce n'est pas le cas je tenterais de réexpliquer ceci.
Merci

Il est tout à fait possible de mettre uniquement du texte sur ton image d'autant plus si une utilise une font particulière qui ne sera sans doute pas dispo sur le pc de tous tes utilisateurs (avec Photoshop, Photofiltre c'est en tout cas possible) tu places ta zone texte de la même façon que dans le tuto pour une image classique et tu enregistres au format image que tu vas appeler dans ta css

Cdt,
Sylvain

quelle rapidité !
en fait ce qui me pose problème c'est de devoir appeller une image différente pour chaque bouton, comme le texte change, donc je ne peux pas faire

background: url(image.jpg);

je ne sais pas où insérer code ni comment.

l'idée étant d'utiliser une image par lien
exemple menu : accueil - présentation - liens
Comme je tiens à utiliser une typo spécifique (non présent sur la plupart des ordis), il faut que j'utilise une image/bouton avec texte et fond par lien.
Est-ce qu'il existe une méthode par CSS et non javascript ?
Dans tutoriel la méthode n'utilise qu'une image pour tous les boutons.
Modifié par lmd (02 Oct 2007 - 17:38)

Alors il te faudra définir chacun de tes liens ainsi que leurs état survolés, en reprenant le tuto d'AlsacréationS, cela nous donne :
Feuille de style:

ul#menu
{
	position:absolute;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li
{
	margin: 0 0 5px 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menu li#accueil a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 170px ;
	line-height: 30px ;
	color: #000 ;
	[#red]text-indent: -5000px ;[/#] 
	text-decoration: none ;
	background: no-repeat 0 0 ;
	background-image: url(1.jpg);
	border: 1px solid #dbd ;
}
ul#menu li#présentation a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 170px ;
	line-height: 30px ;
	color: #000 ;
	text-indent: -5000px ; /* On décale le texte de 40px du bord gauche */
	text-decoration: none ;
	background: no-repeat 0 0 ;
	background-image: url(2.jpg);
	border: 1px solid #dbd ;
}
ul#menu li#liens a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 170px ;
	line-height: 30px ;
	color: #000 ;
	text-indent: -5000px ; /* On décale le texte de 40px du bord gauche */
	text-decoration: none ;
	background: no-repeat 0 0 ;
	background-image: url(3.jpg);
	border: 1px solid #dbd ;
}

ul#menu li#accueil a:hover
{
	background: url(1.jpg) no-repeat 0 -30px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 1px solid #f97 ;
}
ul#menu li#présentation a:hover
{
	background: url(2.jpg) no-repeat 0 -30px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 1px solid #f97 ;
}
ul#menu li#liens a:hover
{
	background: url(3.jpg) no-repeat 0 -30px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 1px solid #f97 ;
}

Et html :

<ul id="menu">
	<li id="accueil"><a href="#">accueil</a></li>
	<li id="présentation"><a href="#">présentation</a></li>
	<li id="liens"><a href="#">liens</a></li>
</div>

Le text-indent à -5000px c'est pour avoir la désignation du liens dans un navigateur vocal, ou en cas d'indisponiblité de tes images ou de ta feuilles de style.

Si je suis dans le faux, merci aux spécialistes de me fouetter sur la place publique

merci beaucoup !
j'essaye ça dès que je peux.