[CSS] Changer d'image quand on passe dessus

**Trunks** · 07/12/2005, 17h18

Bonjour, je fais un menu. Quand je passe la souris dessus, je voudrais changer d'image (je sais faire seulement sur les backgrounds).

Merci

**jeff_!** · 07/12/2005, 17h29

tu peut changer "d'image" avec le pseudo elment hover, en realiter on ne change pas l'image du background mais on lui applique une translation

**denisC** · 08/12/2005, 08h27

Envoyé par jeff_!

tu peut changer "d'image" avec le pseudo elment hover, en realiter on ne change pas l'image du background mais on lui applique une translation

A priori, le hover, ça ne marche que sur les élements A.

Sinon, tu peux faire ce que tu veux en JavaSCript, en utilisant les evenements onmouseover et onmouseout. Referes toi à la FAQ JavaScript

**jeff_!** · 08/12/2005, 09h01

je suis partie du principe qu'il utilisait se genre de structure pour le menu

Code :

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

1
2
3
<ul>
<li><a href=#></a></li>
</ul>

**SpaceFrog** · 08/12/2005, 09h45

je suis partie du principe qu'il utilisait se genre de structure pour le menu

Code :

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

1
2
3
<ul>
<li><a href=#></a></li>
</ul>

et un src sur un a ça donnerait quoi ?
je ne vois vraiment pas comme changer d'image sur le hover d'un a ...
sauf à tricher avec deux images superposées et en jouant sur le visibility ...
mais la structcture serait:

Code :

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

<a><img src="..."/></a>

**jeff_!** · 08/12/2005, 12h49

tu peut jouer sur le positionnement du background

Code :

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

1
2
3
4
5
6
7
8
9
a{
background-image:'monimage.jpg';
background-position:top left;
}
 
a:hover{
background-image:'monimage.jpg';
background-position:bottom right;
}

l'exemple ne fonctionne certainement pas
plus d'explication sur www.alacreations.com

**SpaceFrog** · 08/12/2005, 14h21

avec une image double et seulement la moitié haute ou basse de l'image affichée ...??
je n'avais pas pensé à ça ...

**SpaceFrog** · 08/12/2005, 14h40

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type='text/css'>
a  {	background-image:URL('TaxImages/bouton.jpg');
			background-position:top left;
			text-decoration:none;
			}
 
a:hover{/*background-image:'monimage.jpg';*/
	background-position:bottom left;
	color:red;
}
</style>
</head>
 
<body>
<a style="width:60px;height:44px;" href="javascript:function(){return false;}" >&nbsp;</a>
</body>

en prenant bien soin que les deux moitiés d'images aient la même hauteur et que la balise a fasse la moitié de la hauteur de l'image ...
par contre pour l'alignement vaut mieux rester tout à droite ou tout à gauche ...

**SpaceFrog** · 08/12/2005, 14h50

pour que cela focntionne également sous firefox il faut préciser que la balise a doit s'afficher en block et non inline (par defaut)
de plus pour différecier les a on peut passer par leur id ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<style type='text/css'>
a#test    { display:block;
				background-image: url('bouton.jpg'); text-decoration: none; 
        background-position: top left }
a#test:hover{background-position:bottom left;
	 }
</style>
</head>
 
<body>
<a id='test' style="width:60px;height:44px;" href="javascript:function(){return false;}" >&nbsp;</a>

**SpaceFrog** · 08/12/2005, 15h04

l'avantage de mon système est qu'il n'y a à qu'une image ... donc pas de délai de telechargement...
avec les différentes combinaisons de positions on doit pourvoir afficher les 4 coins de l'image ...

**Maxoo** · 08/12/2005, 15h09

une image ou deux, ca sera le meme temps de chargement, (au total) et ca évite quand meme de se casser la tete a faire des maths

(bien que j'ai toujours aimé les maths, mais des fois faut pas pousser

)

**SpaceFrog** · 08/12/2005, 15h17

des maths ?

pas de maths dans mes alignements ...

:

**Trunks** · 08/12/2005, 17h06

Merci pour votre débat par rapport à ma question. Je vais essayer les différentes possibilités, puis, je vous communiquerai laquelle j'ai choisi et pourquoi 8)
Merci beaucoup en attendant

**Trunks** · 08/12/2005, 22h18

J'ai finalement opté pour le choix de Maxoo. C'est justement la façon sur laquelle j'étais en train de bosser. Et de plus, je trouve cette manière plus instinctive.

Voici le rendu : http://tests.guduszeit.com/test.html

Note: j'ai pas encore le 2e bouton, car j ai pas les calques, je vais les ajouter prochainement, mais c'est le mécanisme qui compte ;-)

[CSS] Changer d'image quand on passe dessus

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager