18100 sujets

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

Menu images rollover

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 !
Sujet clos
Aller à