onmouseout, onmouseover, onclick

Version imprimable

08/02/2006, 11h46
denn

onmouseout, onmouseover, onclick

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.
08/02/2006, 11h50
SpaceFrog

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

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

Code:

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 :)

08/02/2006, 13h30
SpaceFrog

Code:

var clicked=false

puis

Code:

if(clicked)

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

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:

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>

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

Code:

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>

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

Code:

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

08/02/2006, 14h41
m@t

Pas de quoi :D
30/06/2011, 04h53
typiac

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? :mrgreen: