Metre deux images sur des liens dans des listes

bonjour, je suis nouveau sur ce grand forum et je suis un peut perdu lol
voila mon problème:
je cherche comment faire avec css pour definir une image en a, une autre en a: hover sur des liens qui sont eux meme dans une liste:

<ul>
<li>Lien1</li>
<li>Lien2</li>
<li>Lien3</li>
<li>Lien4</li>
</ul>

merci pour vos pistes
Modifié par titi17s (19 Apr 2007 - 14:23)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Bonjour,

Ca pourrait être quelque chose comme ça:

html:

<ul>
<li id="lien1"><a href="#">Lien1</a></li>
</ul>

Css :

#lien1 a  {
background: url(images/toto.gif) no-repeat;
}

#lien1 a:hover  {
background: url(images/toto2.gif) no repeat:
}

Bon courage

JF

Oublie ma réponse, j'ai écrit trop vite!!

Je cherche...

JF
Modifié par fxbrg (19 Apr 2007 - 10:56)

Après avoir testé (ce que j'aurais du faire avant! lol)

html:

<ul>
<li id="lien1"><a href="lien1.html"></a></li>
<li id="lien2"><a href="lien2.html"></a></li>
</ul>

Css

#lien1 a	{
display: block;
width: 220px;
height:220px;
background: url(images/bouleorange.gif) no-repeat;
}

#lien1 a:hover	{
background: url(images/boulebleue.gif) no-repeat;
}

#lien2 a	{
	display: block;
	width: 220px;
	height:220px;
	background: url(images/boulerouge.gif) no-repeat;
}

#lien2 a:hover	{
background: url(images/bouleverte.gif) no-repeat;
}

Ca marche ici, il faut impérativement display:block et la taille de l'image, je ne sais pas pourkoi... mais tant que ça fonctionne! lol

@+,

JF

Tout d'abord merci a JF pour tes réponses : ça marche!! merci

ensuite pardon aux admin j'aurais du aller voir les règles du forum

merci de votre aide
JP