18073 sujets

Questions générales et questions de débutants

[résolu] Roll over en CSS avec une plusieurs différentes images

Bonjour

Voila j'ai un menu "roll over en CSS avec une seule image"
Comme ceci http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique

Cependant voilà, je voudrais utiliser une image différente pour chaque éllements (liens) contenu dans le menu au lieux d'utiliser toujours là même image de fond.
(Car le texte du menu est une image, je sais que se n'est optimal mais c'est un choix de design.)

<ul id="menu">
		<li><a href="#">&nbsp;</a></li>
		<li><a href="#">&nbsp;</a></li>
		<li><a href="#">&nbsp;</a></li>
		<li><a href="#">&nbsp;</a></li>
		<li><a href="#">&nbsp;</a></li>
	</ul>


et CSS qui va bien ...

ul#menu li
{
	float: left ;
	text-align: center ;
}

ul#menu li a
{
	display: block ; 
	width: 80px ;
	line-height: 25px ;
	font-size: 1.2em ; 
	letter-spacing: 2px ; 
	color: #000 ;
	text-indent: 40px ; 
	text-decoration: none ;
	background: url(../../images/liens.jpg) no-repeat 0 0 ; 	border: 1px solid #dbd ;
}

ul#menu li a:hover
{
	background: url(../../images/liens.jpg) no-repeat 0 -25px ; 	border: 1px solid #f97 ;
}


Le problème c'est que je ne sais pas comment mi prendre dans le css.
Je ne veux pas d'images directement dans le menu, je tien a se les images soit dans le css.
Mais je ne voi pas comment indiquer que tel image correspond a tel éllements (liens) du menu.
Ajouter un id me parait abuser ! et je ne voie pas quel attribu pourai m'aidé....

En bref je cherche a faire un menu horizontal roll over en CSS avec plusieurs différentes images.

Quelqu'un a une idée ?
Modifié par polau (29 Jul 2010 - 11:59)
Bonjour,
Il te faudra passer par "une image différente = une classe (ou id) différente" Ca ne veut pas dire multiplier ton code par deux, simplement ajouter autant de lignes du type que d'images différentes:

ul#menu li a.image1:hover
{
background: url(../../images/image1.jpg) no-repeat 0 -25px ; 	border: 1px solid #f97 ;
}

etc…
Modifié par zzzazzz (15 Feb 2006 - 08:34)
ok donc j'ai comme syntaxe sur la page index

<ul id="menu">
		<li><a href="#" class="image1">&nbsp;</a></li>
		<li><a href="#" class="image2">&nbsp;</a></li>
		<li><a href="#" class="image3">&nbsp;</a></li>
		<li><a href="#" class="image4">&nbsp;</a></li>
		<li><a href="#" class="image5">&nbsp;</a></li>
</ul>


Ok j 'ai comprid marci beaucoup de ton aide zzzazzz
Sujet clos
Aller à