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

**reman** · 28/04/2010, 16h54

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 :

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

**E.Bzz** · 28/04/2010, 16h58

Bonjour,

Envoyé par reman

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

Comme indiqué dans la FAQ

Et pas besoin de connaitre les coordonnées

A+

**SpaceFrog** · 28/04/2010, 17h00

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

**reman** · 28/04/2010, 17h34

ok genre ça en css :

Code :

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

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; 
}

**SpaceFrog** · 28/04/2010, 18h42

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

**reman** · 29/04/2010, 11h03

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

**SpaceFrog** · 29/04/2010, 11h16

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

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

JavaScript

Discussions similaires

Partager

Partager