Bonjour,

j'aimerai faire un menu constitué d'images, avec effet rollover au passage de la souris (chargement d'une nouvelle image)

Le menu comporte 4 items, pour le 1er je souhaite afficher l'image (image1.png), pour le deuxième (image2.png), etc.
Lorsque l'utilisateur survole (image1.png) elle devient (image1-roll.png).

Seulement, je n'y arrive pas.

Afin de commencer je souhaite afficher un menu horizontal avec la même image (image1.png) pour les 4 éléments. Mais, déjà, les problèmes arrivent.

Voici le code css:
			#nav {
				list-style: none ;
				margin: 0 ;
				padding: 0 ;
				overflow: hidden ;		/* Création du contexte de formatage */
				}
			#nav li {
				float: left ;
				width: 83px ;
				color: #fff ;
				background: #c00 ;
				}
			#nav li a {
				display: block ;
				background: url(../images/menu-accueil.png) left top no-repeat ;
				color: #fff ;
				line-height: 1em ;
				padding: 4px 0 ;
				text-align: center ;
				text-decoration: none ;
				}
			#nav li a:hover, #nav li a:focus, #nav li a:active {
				background: #033 url(../images/menu-accueil-hover.png) left top no-repeat ;


Et voici le résultat : http://www.graphisteweb.com/else/Argos/index2.html

Comment enlever le rouge, le vert et le texte "item1" de tous ces éléments.. ? Comment faire pour n'afficher QUE l'image1.png pour tous

(viendra ensuite le moment où je pourrai associer 1 image pour 1 élément).

Merci de vos éclaircissements,
Modifié par Furox (03 Feb 2011 - 17:21)
Bonjour.

Je note quelques oublis quand je compare les balises déclarées et celles utilisées.
Il n'y a pas de <ul> ni <li> dans le html, alors que ces balises ont des propriétés dans le css.

Dans la page web, mettre quelque chose comme ça (à ajuster) :

<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<ul id="navigation"> 
    <li><a href="#" title="aller à la section 1"></a></li> 
    <li><a href="#" title="aller à la section 2"></a></li> 
    <li><a href="#" title="aller à la section 3"></a></li> 
    <li><a href="#" title="aller à la section 4"></a></li> 
    <li><a href="#" title="aller à la section 5"></a></li> 
</ul>


et dans le CSS :

#navigation li a { 
    display: block ; 
    background: #900 url(lienCoulissant.png) left top no-repeat ; 
    color: #fff ; 
    height: 30px; 
    font: 1em "Trebuchet MS",Arial,sans-serif ; 
    line-height: 1em ; 
    padding: 0px 0 ; 
    text-align: center ; 
    }     
    
#navigation li a:hover, #navigation li a:focus, #navigation li a:active { 
    background: url(lienCoulissant.png) right top no-repeat ; 
    }

    
#navigation li { 
    float: left ; 
    width: 150px ; 
    border: 1px solid #600 ; 
    margin-right: 1px ; 
    color: #fff ; 
    background: #c00 ; 
    height: 30px; 
}
    
#navigation li { 
    float: left ; 
    height: 30px; 
}
    
#navigation { 
    margin: 0 ; 
    padding: 0 ; 
    list-style: none ; 
    text-align: center ; 
    height: 30px; 
}


Le tout avec une image bidon de 300*50px, comme expliqué en bas de la page disponible ici

Il n'est pas nécessaire de mettre du texte entre <a></a> pour que ça fonctionne.
Bonjour,

Un roll-over sur des images liens porteuses de contenu DOIT se faire en JavaScript pour des raisons d'accessibilité, mais également de référencement !