Décaler une image au survol de la souris

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

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, 12h51

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, 12h56

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, 13h07

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, 13h16

Ok,

Mais je ne veut pas employer le href

Une autre solution ?

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

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)

Décaler une image au survol de la souris

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

Vue hybride

Discussions similaires

Partager

Partager