onmouseout, onmouseover, onclick

**denn** · 08/02/2006, 12h46

Bonjour,

j'ai une image qui me sert de lien pour une autre page et je voudrais utiliser les 3 fonctions suivantes, onMousover, onMouseOut et onClick.

j'ai pour cela deux images.

l'image 1 est l'image de base du lien, l'image 2 est l'image qui doit apparaître lors d'un survol du lien et aussi celle qui doit être affiché lors du click sur le lien.

je voudrais garder l'image 2 lors du clik quand la page est active mais le onmouseout est prioritaire donc je me retrouve sur l'image 1 dans tous les cas donc je voudrais savoir comment garder l'image 2 quand le lien est cliqué.

je sais pas si je me suis bien fais comprendre mais merci d'avance.

**SpaceFrog** · 08/02/2006, 12h50

avec une variable flag qui conservera l'état du bouton à savoir clické ou non clické ...
un test dans le onmouseover et dans le onmouseout pour vavsoir si tu dois changer l'image ou non ...

**m@t** · 08/02/2006, 13h00

Un petit exemple vite fait .. qui serait sûrement optimisable

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
28
29
30
 
<html>
<head>
<script type="text/javascript">
 
var clicked = "no";
 
function swapImage(){
 
	if(clicked == "no"){
		if(document.getElementById("image").src == "image1.jpg")
			document.getElementById("image").src = "image2.jpg";
		else
			document.getElementById("image").src ="image1.jpg";	
	}
}
function clickImage(){
 
	clicked = "yes";
 
}
 
</script>
</head>
<body>
 
<a href="tapage.html" onmouseover="javascript:swapImage();" onmouseout="javascript:swapImage();" onclick="clickImage();"><img src="image1.jpg" id="image" /></a>
 
</body>
</html>

En espérant que ça t'aide

**SpaceFrog** · 08/02/2006, 14h30

Code :

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

var clicked=false

puis

Code :

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

if(clicked)

plus simple ...
mais sinon le principe est là ..

**denn** · 08/02/2006, 14h57

merci pour les informations, j'ai fait ceci mais j'ai l'impression que la comparaison du premier if ne fonctionne pas car je ne passe jamais dedans.

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
 
<script language="javascript">
 
var clic=false;
function swapImage()
{
	if (clic)
	{
		if(document.image_sant.src=="images/sante.gif")
		{
			document.image_sant.src="images/sante_over.gif"
		}
		else
		{
			document.image_sant.src="images/sante.gif"
		}
	}
}
</script>
</head>
 
<body bgcolor="#0D0405" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 
<div id="test">
<a href="sante.htm" target="reference">
<img  border="0" src="images/sante.gif" id="image_sant" onClick="document.image_sant.src='images/sante_over.gif';clic=true" onMouseOver="swapImage();" onMouseOut="swapImage();"></a>
</div>

**m@t** · 08/02/2006, 15h01

Il faut que tu inverses ... c'est normal tu déclares ta variable clic à false ... donc if(clic) te renvoie false à chaque fois

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
 
<script language="javascript">
 
var clic=false;
function swapImage()
{
   if (!clic)
   {
      if(document.image_sant.src=="images/sante.gif")
      {
         document.image_sant.src="images/sante_over.gif"
      }
      else
      {
         document.image_sant.src="images/sante.gif"
      }
   }
}
</script>
</head>
 
<body bgcolor="#0D0405" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 
<div id="test">
<a href="sante.htm" target="reference">
<img  border="0" src="images/sante.gif" id="image_sant" onClick="document.image_sant.src='images/sante_over.gif';clic=true" onMouseOver="swapImage();" onMouseOut="swapImage();"></a>
</div>

**denn** · 08/02/2006, 15h30

ok donc après quelques déboires ça marche voici le code :

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
28
29
30
 
 
<script language="javascript">
 
var clic=false;
var etat=0;
function swapImage()
{
   if (!clic)
   {
      if(etat==0)
      {
         document.image_sant.src="images/sante_over.gif";
      }
      if(etat==1)
      {
         document.image_sant.src="images/sante.gif";
      }
   }
}
</script> 
</head>
 
<body bgcolor="#0D0405" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 
<div id="test">
<a href="sante.htm" target="reference">
<img src="images/sante.gif" border="0" name="image_sant" onClick="image_sant.src='images/sante_over.gif';clic=true" 
onMouseOut="swapImage();etat=0;" onMouseOver="swapImage();etat=1;"></a>
</div>

merci pour l'aide

**m@t** · 08/02/2006, 15h41

Pas de quoi

**typiac** · 30/06/2011, 05h53

merci pour ce message, j'ai pas mal parcouru le net à la recherche d'une réponse et c'est ici que j'ai trouvé donc je me suis inscrit!

J'ai toutefois une question pour corser un peu le problème dans le cadre d'une succession d'images d'un menu:

Comment faire pour que l'image maintenu à l'aide de la fonction onclick (images/sante_over.gif) revienne à son état de départ (images/sante.gif) si on clique sur une autre image du menu?

onmouseout, onmouseover, onclick

JavaScript

Discussions similaires

Partager

Partager