Rollover de cinq boutons à trois états avec une seule image.

Bonjour, je suis tombé grâce a un topic un peu plus bas sur ce tutoriel. Ce qui est parfaitement pratique pour le menu que je comptes faire(onglets arrondis). J'ai donc commencer à suivre le tutoriel, mais je n'arrives à aucun résultat. Mon menu est un menu à onglet(horizontal donc), avec 5boutons, et 3états(page en cours, hover, et inactif) l'image de mon menu est la suivante(dans l'ordre de haut en bas: inactif, hover, en cours):

mon code HTML le suivant

<ul id="menu">
	<li id="accueil-selected"><a href="#0"></a></li>
	<li id="challenges"><a href="#1"></a></li>
	<li id="autres-jeux"><a href="#2"></a></li>
	<li id="forums"><a href="#3"></a></li>
	<li id="faq"><a href="#4"></a></li>
</ul>

Et mon CSS est celle-là:

#menu
{
	height:26px;
	margin-top:0px;
	background-color:#3a3b4a;
	background-image:url('../images/menu.jpg');
	background-repeat:no-repeat;
	position: relative;
}

#menu li
{
	list-style-type:none;
	position: absolute;
	top:0px;
}

#menu li , #menu li a
{
	width:135px;
	height:26px;
	display: block;
}

#menu li#accueil
{
	left:0px;
}

#menu li#accueil:hover
{
	background-image: transparent url('../images/menu.jpg') 0px 26px no-repeat;
}

#menu li#accueil-selected
{
	background-image: transparent url('../images/menu.jpg') 0px 52px no-repeat;
}

(Il n'est pas complet évidement, pour ne pas être trop imposant, de toute manière ce qui reste ce sont les même paramètres pour les autres boutons).

Mon problème est que, la partie inactif s'affiche, mais pas moyen d'afficher le "-selected" lorsque l'on est sur la page accueil par exemple, pareillement pour le :hover....
Mon image est totalement inerte. Auriez-vous une idée du problème?

Merci d'avance,
Maz.
Modifié par Mazor (13 Sep 2008 - 18:17)

Salut,

Vu que tes images se situent en dessus de celle inactive... il faudrait REMONTER l'image
Donc -26 et -52 pixels et pas 26 et 52 pixels.

Bonjour,

Mazor a écrit :
Auriez-vous une idée du problème?

Ça pourrait venir du fait que ton code CSS n'est pas valide, par exemple. Tu passes toute une série de valeurs à la propriété background-image, alors que celle-ci n'accepte qu'une valeur à la fois.

Un autre problème: le menu que tu souhaites réaliser ne sera pas accessible. Les intitulés de tes liens sont vides (dans le code HTML), et tu utilises des images de fond (donc de la décoration, désactivable par l'utilisateur...) comme intitulés.

Ce genre de menu avec intitulés en images se réalise avec des images dans le code HTML, avec attributs alt qui vont bien:

<a href="/"><img src="..." alt="Accueil" /></a>

Les effets de rollover sont alors gérés en JavaScript.

Le problème de cette solution (la seule réellement accessible si on veut des intitulés en images), c'est qu'il faut savoir utiliser JavaScript, et utiliser une quinzaine d'images plutôt qu'une seule «grille».

Mikachu a écrit :
Salut,

Vu que tes images se situent en dessus de celle inactive... il faudrait REMONTER l'image
Donc -26 et -52 pixels et pas 26 et 52 pixels.

J'ai effectivement fait cette erreur, mais j'ai mi en négatifs, et toujours rien...,

Florent V. j'ai pas mis de title juste par flemme, mais dans l'absolue, il auront des "title", quand aux img src avec javascript, j'aimerais d'abord tenté cette technique de rollover juste pour la connaissance, après (peut-être) changer pour un menu plus accessible.

Mazor a écrit :
J'ai effectivement fait cette erreur, mais j'ai mi en négatifs, et toujours rien...

Quitte à me répéter: c'est normal, ton code est invalide, tu ne peux pas utiliser background-image de la sorte.

Hop, révision:
http://www.yoyodesign.org/doc/w3c/css2/colors.html#background-properties

Mazor a écrit :
j'ai pas mis de title juste par flemme, mais dans l'absolue, il auront des "title"

Déjà, la flemme c'est pas bien.
Ensuite, je ne parlais pas d'attributs title, mais d'intitulé des liens. Illustrons ça avec un peu de code:

<!-- Ceci est un lien vide, sans intitulé: -->
<a href="http://www.example.com"></a>

<!-- Ceci est un lien avec un intitulé: -->
<a href="http://www.example.com">Intitulé du lien</a>

<!-- De même avec une image: -->
<a href="http://www.example.com"><a src="image.png" alt="Intitulé du lien" /></a>

Même ce code, ne fonctionne pas:

#menu li#challenges
{
	left:135px;
}

#menu li#challenges a:hover
{
	background-image:url('../images/menu.jpg');
	background-position: 135px -26px;
	background-repeat:no-repeat;
}

#menu li#challenges-selected
{
	background-image:url('../images/menu.jpg');
	background-position: 135px -52px;
	background-repeat:no-repeat;
}

EDIT: J'ai réussi 2/10 de ce que je voulais faire, le -selected et le :hover marches sur le bouton Accueil. Mon problème était que dans le background-position, il fallais mettre les deux valeurs puis l'unité de mesure: 0 -26px et non 0px -26px.

Cependant, cela ne marches que pour le bouton accueil, sur les autres bouton, il m'affiche l'était "inactif" du bouton accueil lorsque je passes ma souris dessus... Aller savoir pourquoi .
Modifié par Mazor (13 Sep 2008 - 21:49)

Mazor a écrit :
Mon problème était que dans le background-position, il fallais mettre les deux valeurs puis l'unité de mesure: 0 -26px et non 0px -26px.

Non. Les notations suivantes sont strictement équivalentes:

background-position: 0px -26px;
background-position: 0 -26px;
background-position: left -26px;

Mazor a écrit :
sur les autres bouton, il m'affiche l'était "inactif" du bouton accueil lorsque je passes ma souris dessus... Aller savoir pourquoi

Parce que tu n'utilises pas les bonnes valeurs de background-position dans chaque cas (en effet, il va te falloir des valeurs spécifiques à chaque état de chaque bouton), ou éventuellement parce que tes sélecteurs sont mauvais?
À priori, l'état inactif du bouton d'accueil correspond à la portion située le plus en haut à gauche de ton image. Donc tu n'appliques probablement pas de valeurs pour background-position pour l'état survolé de chacun de ces liens, et le navigateur utilise la valeur par défaut.
Modifié par Florent V. (13 Sep 2008 - 22:37)