Afficher une partie d'une image (bouton menu)

Version imprimable

08/08/2009, 13h40
Elendill

Afficher une partie d'une image (bouton menu)

Bonjour,

Voilà j'aimerais animé un peu les boutons de menu sur mon site. J'ai donc fais des onmouseover etc pour changer d'image au survol de la souris. Le problème est que pendant le chargement de l'image de survol l'autre disparait, donc il y a un petit temps ou il n'y a pas d'image du tout.

Je sais que ça se fait de ne faire qu'une seule image contenant les 2 états du bouton et en afficher une partie d'abord, puis une autre au survol. L'image étant déjà chargée entièrement il n'y a pas d'attente quand on change de partie. Seulement j'ai oublier le nom de cette technique et donc je ne sais pas comment faire ...

Merci de votre aide :)
08/08/2009, 14h53
Macmillenium

Bonjour,

Tu le fais simplement en CSS : une seule image en background et jouer sur le background-position dans le hover.
09/08/2009, 01h50
Elendill

ok merci c'est ça que je veux en fait mais si je met ca dans une div ca prend toute la largeur de la page... si je rajoute des float ça fait des trucs bizarres...
09/08/2009, 12h28
Macmillenium

Difficile de t'aider sans ton code (X)HTML/CSS ou une page en ligne.

1 pièce(s) jointe(s)

Citation:

Envoyé par Elendill

ok merci c'est ça que je veux en fait mais si je met ca dans une div ca prend toute la largeur de la page... si je rajoute des float ça fait des trucs bizarres...

Alors un exemple aprés ça tu te débrouille :D
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html><body> <style> a.Fox { display: block; height:103px; width: 103px; background: url(bouton.jpg); background-repeat: no-repeat; } a.Fox:hover { background-position: 0% -103px;} </style> <a href="#" class="Fox" title="Test bouton"></a> </body></html>