Faire un rollover sur une image en utilisant les coordonnées X & Y

Version imprimable

28/04/2010, 16h54
reman

Faire un rollover sur une image en utilisant les coordonnées X & Y

Bonjour,

Nous voyons souvent un effet rollover sur l'image qui remplace le bouton de validation d'un formulaire par exemple.
La méthode utilisée est souvent les coordonnées en X & Y d'une même image de ce type :
http://nsa14.casimages.com/img/2010/...4135934623.gif
On se sert des coordonnées en X & Y pour afficher la partie supérieur en affichage normale et la partie inférieur en état hover lorsque le curseur de la sourie passe dessus.

Comment ça marche en Javascript et comment on fait cela ?!

Merci pour vos réponses :zoubi:
28/04/2010, 16h58
E.Bzz

Bonjour,

Citation:

Envoyé par reman

Comment ça marche en Javascript et comment on fait cela ?!

Comme indiqué dans la FAQ :mrgreen:

Et pas besoin de connaitre les coordonnées ;)

A+
28/04/2010, 17h00
SpaceFrog

Heu non avec une seule image en background css ... il suffit de modifier le backgroundPositon de top à bottom

ok genre ça en css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
.images {
width: 196px;
height: 91px; /* correspond à la moitié de la hauteur de mon image */
backgroundPositon: top;
}
 
.images:hover {
width: 196px;
height: 91px; /* correspond à la moitié de la hauteur de mon image */
backgroundPositon: bottom; 
}

28/04/2010, 18h42
SpaceFrog

oui sauf que seules les version recentes de IE acceptent le hover pour autre chaose que la balise a.
l suffit d'avoir deux class et de modifier le className sur le mouseover et mouseout
29/04/2010, 11h03
reman

Peux tu me donner un exemple en utilisant mon image plus haut.
le but est que cette image qui est contenue dans un block "div"
qui fait la moitié en hauteur de cette image.
Un exemple et tjrs plus parlant !

Merci !!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
#butvalid {
	height:91px;
	width:196px;
	border:0;
	background-image: url('butvali.gif');
	background-repeat: no-repeat;
	background-position:top;
	}
</style>
</head>
<body>
<div id="butvalid" onmouseover="this.style.backgroundPosition='bottom'" onmouseout="this.style.backgroundPosition='top'"></div>
</body>
</html>

a noter que le trait noir au mileu ne sert à rien

91 * 2 = 182 tu as une ligne horizontale noire de 1 pixel inutile ...