Décaler une image au survol de la souris

**malabarbe** · 28/08/2009, 13h47

Bonjour à tous,

Ce que le source fait :
- Un RollOver sur l'image
- Au click, appel d'un lien
- Au survol de l'image curseur (Main)

Ce que je voudrais en plus, c'est qu'au survol de l'image,
celle-ci se déplace de 30 pixels sur la droite et revenir
a sa place d'origine quand plus de survol.

N'y arrivant pas avec le CSS, le JavaScript pourai
peut être le faire.

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
17
18
19
20
21
22
23
24
25
26
27
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
#bouge:hover
{
 margin-left: 30px;
}
 
#bouge
{
 cursor:pointer; 
}
 
</style>
</head>
<body>
 
<table border="1" width="382" cellpadding="0" style="border-collapse: collapse" height="23" bordercolor="#0000FF">
<tr onClick="parent.frames['bas_droite'].location.replace('menu.php')">
<td bordercolor="#0000FF"><img id="bouge" border="0" onmouseover="this.src='../images/mg2-01-c.gif'" src="../images/mg2-01-f.gif"
alt=" Avec lien mais ne décale pas a droite."
onmouseout="this.src='../images/mg2-01-f.gif'"></a>
</td></tr>
</table>
</body></head>

Je ne sais pas si cela est faisable,
et si oui, comment ?

**HiRoN** · 28/08/2009, 13h51

Sauf erreur de ma part, pour que cela fonctionne via CSS, il faut :

Passer l'image en display:block; (de base en inline)
Lui donner une taille
Appliquer le margin-left:30px;

Pour apprendre facilement CSS regarde ces excellents tutoriels et cours de formation CSS : http://css.developpez.com/cours/

**malabarbe** · 28/08/2009, 13h56

Bonjour HiRoN,

J'ai modifié, mais le décalage s'applique tout de
suite mème sans survol !

Code :

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

1
2
3
4
5
6
7
 
#bouge
{
 display:block;
 cursor:pointer; 
 margin-left: 30px;
}

**HiRoN** · 28/08/2009, 14h07

Envoyé par malabarbe

J'ai modifié, mais le décalage s'applique tout de
suite mème sans survol !

A ne mettre que sur le hover... (attention pour ie6 qui ne gère le hover que sur un <a>)

Il me semble que dans ton cas, une construction plus propre aurait été :

Code HTML :

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

1
2
3
4
5
6
7
8
9
<table>
<tr>
<td>
<a href="" title="">
<img src ... />
</a>
</td>
</tr>
</table>

**malabarbe** · 28/08/2009, 14h16

Ok,

Mais je ne veut pas employer le href

Une autre solution ?

**HiRoN** · 28/08/2009, 14h43

Envoyé par malabarbe

Une autre solution ?

La même sans le <a>... (mais ne fonctionneras pas sous ie6, ou avec un correctif genre hover:whatever)

**malabarbe** · 28/08/2009, 18h07

J'ai regardé correctif genre hover:whatever

Mais, je n'y comprends rien !

Comment l'adapter a mon code ?

**HiRoN** · 28/08/2009, 18h32

Envoyé par malabarbe

Comment l'adapter a mon code ?

Il suffit de récupérer le fichier csshover3.htc et de le placer sur ton site (à la racine par exemple) et de mettre dans ton CSS :

Code :

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

* html body { behavior:url(csshover3.htc); /* Voir même juste sur body */ }

Mais il y a d'autre façon de l'implémenter...

**malabarbe** · 29/08/2009, 00h47

Bonsoir HiRoN,

Je n'ai pas réussi
D'après les nombreuses infos que j'ai consultées,
c'est un vrai pannier de crabes.

Comme quoi une piste en amène sur une autre,
j'ai trouvé un moyen simple qui sera compris par
tous les navigateurs du monde !!!

J'ai simplement ajouté un blanc transparant a gauche
en plus de mon image au survol et cela tourne Nikel.

Un grand merci pour tous vos conseils

@ +

**HiRoN** · 29/08/2009, 01h21

Envoyé par malabarbe

J'ai simplement ajouté un blanc transparent a gauche en plus de mon image au survol et cela tourne Nikel.

Mais le hover ne passera pas sous ie6 (vu qu'il ne gère le hover que sur la balise <a>)...

Décaler une image au survol de la souris

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager