onmouseover=Image 1, onmouseout= Image 2 un code qui marche ?

**zvath773** · 01/04/2012, 11h59

Salut, j'aimerais faire un truc tout simple :

J'ai 2 images;

Mon image 1 est là par défaut.
Lorsque je passe la souris sur l'image 1, l'image 2 apparaît.
Et dès que la souris sort de l'image 2, c'est à nouveau l'image 1 qui apparaît.

J'aimerais que l'image 2 soit cliquable et redirige vers un lien hypertexte.

J'ai essayé plusieurs bouts de codes trouvés sur internet comme :

Code :

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

1
2
3
<a href="Mon lien" title="lien"><img src="Mon image 1" alt="Image ^^" style="border:0px;" 

onmouseover="this.src='Mon image 2';" onmouseout="document.NOM.src="Mon image 1"></a>

Mais ça ne marche pas comme je le veux, car dès que je sors la souris de l'image 2....l'image d'origine ne revient pas donc je me retrouve avec l'image 2 qui reste là comme ça.

J'espère que quelqu'un pourra m'aider, merci.

**RomainVALERI** · 02/04/2012, 10h20

1) pourquoi tout cet espace (en l'occurrence deux sauts de ligne) en plein milieu de ta balise ?

2) pourquoi désigner ton image différemment dans le onmouseout ?

this.src fonctionne bien pour onmouseover, fais la même chose pour le onmouseout ^^

**Vil'Coyote** · 02/04/2012, 17h32

onmouseout="document.NOM.src="Mon image 1"

Code :

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

onmouseout="this.src='Mon image 1'"

si ça marche pour l'un ça marche pour l'autre...

**tho.feron** · 05/04/2012, 17h29

Bonjour,

Une autre solution compatible avec les navigateurs avec JS désactivé :

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

  <style type="text/css">
    #image {
      height: 100px;
      width: 100px;
      background-image: url('/images/1.png');
    }

    #image:hover {
      background-image: url('/images/2.png');
    }
  </style>
</head>

<!-- ... -->

<a href="destination" title="Description">
  <div id="image"></div>
</a>

Même si on perd la balise <img>, au moins ça fonctionne partout.

Cordialement,
Thomas Feron.

onmouseover=Image 1, onmouseout= Image 2 un code qui marche ?

Discussions similaires

Partager

Partager