[Résolu] Roll-over sans préchargement d'images

Bonjour à tous !

Je travaille sur le site Internet de la boutique de ma mère, et j'ai un premier problème lié au CSS.
Je souhaite faire un roll-over sur des boutons, sans être obligé de précharger deux images pour les deux états (actif et survolé).
J'utilise donc une seule image contenant les deux états, et que j'appelle depuis ma CSS et avec des données de position en pixels.

Or ça ne fonctionne pas.

Voici les codes :

<a href="http://www.google.fr" class="menu">Boutique</a>

a:link{
		color:#FF0099;
		text-decoration:none;
		}
		
a:visited{
		color:#FF0099;
		text-decoration:none;
		}
		
a:hover{
		color:#FF0000;
		text-decoration:underline;
		}
		
a.menu:link{
		display:block;
		width:200px;
		height:50px;
		background: url("images/bouton.jpg") no-repeat 0 0;
		}
		
a.menu:hover{
		background: url("images/bouton.jpg") no-repeat 200px 0;
		}

Voici le résultat : lien vers le site
Modifié par seby2027 (01 Jan 2008 - 21:55)

seby2027 a écrit :
Or ça ne fonctionne pas.

Tiens, cela semble très bien marcher chez moi, tant sur gecko que webkit.

Cela marche également avec Opera.

Par contre, ça ne marche pas dans Internet Explorer 6 et 7.

Apparemment, la syntaxe a.menu:link le perturbe. Si je garde juste a.menu, ça marche (a.menu:hover ne le perturbe pas...).

Côté CSS, je remanierais un peu de la sorte:

/* Style générique pour les liens */
a {
	color: #FF0099;
	text-decoration: none;
}
a:hover, a:focus, a:active {
	color: #FF0000;
	text-decoration: underline;
}

/* Liens du menu */
#menu a {
	display: block;
	width: 200px;
	height: 50px;
	background: url(images/bouton.jpg) no-repeat left top;
}
#menu a:hover,
#menu a:focus,
#menu a:active {
	background-position: 200px 0;
}

Techniquement le résultat est presque le même (exception notable: le style au survol est également utilisé au focus, pour la navigation au clavier notamment).

Merci à vous d'avoir répondu aussi rapidement

J'ai copié ton code Florent, en ajoutant text-align : center; histoire de centrer le texte dans mes onglets.

J'ai balancé mon fichier CSS sur mon serveur, j'actualise et par miracle j'ai l'image de l'état inactif, de l'état par défaut.
Par contre lorsque je passe mon curseur sur l'onglet, et bien j'ai un arrière-plan blanc. Il n'y a pas d'image.

Y'a t-il une explication rationnelle ?

Hello Seby,

N'aurais-tu pas omis de déclarer l'image (et qu'elle partie de l'image tu voulais voir s'afficher...) sur ton lien survolé ?

#menu a:hover, #menu a:focus, #menu a:active {
background-position: 200px 0;
}

Instead of :

#menu a:hover,etc...
{
background: url("images/bouton.jpg") no-repeat right top;
}

Modifié par 6l20 (28 Dec 2007 - 20:36)

6l20 a écrit :
N'aurais-tu pas omis de déclarer l'image (et qu'elle partie de l'image tu voulais voir s'afficher...) sur ton lien survolé ?

Non. Les déclarations CSS pour #menu a indiquent déjà le chemin de l'image, le type de répétition, etc. Ces valeurs ne dépendent pas d'un état (:link par exemple) mais s'appliquent à tous les états, y compris :hover, :focus, etc.

Donc théoriquement on change juste le background-position et ça marche.

Ici, ça serait plutôt mon calcul qui était mauvais. Il faut faire:

#menu a:hover, #menu a:focus, #menu a:active {
	background-position: -200px 0;
}

ou encore

#menu a:hover, #menu a:focus, #menu a:active {
	background-position: right top;
}

L'exellentissisme Florent V.(dôrien c'est les fêtes...) a écrit :

Non. Les déclarations CSS pour #menu a indiquent déjà le chemin de l'image, le type de répétition, etc. Ces valeurs ne dépendent pas d'un état (:link par exemple) mais s'appliquent à tous les états, y compris :hover, :focus, etc.
[/code]

Tu as effectivement raison (avec la correction du positionnement) (je "m'embêtais" usuellement à refaire ces déclarations...)
J'adore ce forum, et j'apprend de nouveau quelque chose, thanks mister

C'est bon avec la correction du -200px, cela fonctionne.
Ne t'inquiètes pas Florent, moi aussi je m'étais planté dans mon calcul

Merci.

Re-bonjour,

J'ai souhaité aller plus loin dans la chose, en désirant directement marquer le texte dans l'image, afin de pouvoir utiliser une police de caractère plus stylisée. Je me suis donc dis que je reprendrais les propriétés CSS plus haut, et que je les dupliquerai en 4 afin d'avoir un propriété pour chaque boutons (4 au total).

Mais là je n'ai plus rien du tout

Voici les codes, en premier le HTML, en second le CSS :

<a href="http://www.google.fr" class="menu-boutique" accesskey="B" name="Boutique"></a>
<a href="http://www.google.fr" class="menu-marques" accesskey="M" name="Marques"></a>
<a href="http://www.google.fr" class="menu-promotions" accesskey="P" name="Promotions"></a>
<a href="http://www.google.fr" class="menu-contacts" accesskey="C" name="Contacts"></a>

.menu-boutique a {
		display: block;
		width: 200px;
		height: 50px;
		background: url(images/bouton-boutique.jpg) no-repeat left top;
	}

.menu-boutique a:hover, #menu a:focus, #menu a:active {
		background-position: -200px 0;
	}
	
.menu-marques a {
		display: block;
		width: 200px;
		height: 50px;
		background: url(images/bouton-marques.jpg) no-repeat left top;
	}

.menu-marques a:hover, #menu a:focus, #menu a:active {
		background-position: -200px 0;
	}
	
.menu-promotions a {
		display: block;
		width: 200px;
		height: 50px;
		background: url(images/bouton-promotions.jpg) no-repeat left top;
	}

.menu-promotions a:hover, #menu a:focus, #menu a:active {
		background-position: -200px 0;
	}
	
.menu-contacts a {
		display: block;
		width: 200px;
		height: 50px;
		background: url(images/bouton-contacts.jpg) no-repeat left top;
	}

.menu-contacts a:hover, #menu a:focus, #menu a:active {
		background-position: -200px 0;
	}

Si par hasard vous auriez une idée du problème...

Bonjour,

Tes sélecteurs sont faux: les il n'y a pas de lien enfant ou descendant d'un élément portant la classe "menu-boutique" ou la classe "menu-marque". Ce sont les liens eux-même qui portent ces classes.

Pas bien:

.menu-boutique a {}

Bien:

a.menu-boutique {}
a.menu-boutique:hover {}

Bien sûr, tu pourrais aussi garder tes sélecteurs CSS tels quels, et modifier plutôt ton code HTML. Par exemple pour utiliser une liste non ordonnée, et placer les classes qui vont bien sur les éléments li.

Ceci étant dit...

seby2027 a écrit :
J'ai souhaité aller plus loin dans la chose, en désirant directement marquer le texte dans l'image, afin de pouvoir utiliser une police de caractère plus stylisée.

Utiliser cette méthode des portes coulissantes ou plus généralement toute image de fond portant une information textuelle pose des problèmes d'accessibilité. Si l'image n'est pas chargée (parce que tu t'es trompé dans une URL, parce que le serveur est à la peine, parce que l'image est supprimée par mégarde...), tu n'auras plus d'information, car:
- l'image ne sera pas affichée;
- le texte sera inexistant (pas bien), ou bien masqué via CSS (moins pire mais pas bien non plus).

La technique la plus accessible pour mettre un texte en image, c'est l'utilisation d'une image directement dans le code HTML:

<img src="..." alt="Mon intitulé" />

On peut ensuite faire un rollover en Javascript (une technologie standardisée qui ne mord pas ).

Autre solution envisageable:
1. utiliser une image de fond pour dessiner un motif de fond;
2. et utiliser une image HTML avec texte alternatif pour dessiner le texte (on pourra utiliser du GIF ou du PNG-8, voire du PNG-24 pourquoi pas).

Bonsoir Florent,

Permets moi de te souhaiter une joyeuse et heureuse année 2008.

Je suis vraiment désolé pour mon erreur CSS, une erreur de noob

Sachant que je suis plutôt pour un site accessible, je vais donc abandonner l’idée du menu sans Javascript qui me plaisait bien.

J’utilise donc un menu avec rollover via Javascript.

Je te remercie pour ton aide.