Afficher une partie d'une image (bouton menu)

**Elendill** · 08/08/2009, 13h40

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

**Macmillenium** · 08/08/2009, 14h53

Bonjour,

Tu le fais simplement en CSS : une seule image en background et jouer sur le background-position dans le hover.

**Elendill** · 09/08/2009, 01h50

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...

**Macmillenium** · 09/08/2009, 12h28

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

FoxLeRenard · 09/08/2009, 12h44

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Afficher une partie d'une image (bouton menu)

HTML

Discussions similaires

Partager

Partager