Partage

onMouseOut

Quand la souris va trop vite...

Sujet résolu

17 août 2010 à 17:36:13

Bonjour,

j'ai créé un script, il fonctionne très bien, mais il y a un problème que je n'arrive pas à résoudre. Normalement, il y a un évènement qui se déclenche lorsque la souris quitte une image (un fade sur un texte). Pour savoir que la souris n'est plus sur l'image, j'utilise onMouseOut . Cependant, lorsque qu'on déplace la souris vite, il n'y a pas d'évènement onMouseOut , par contre le onMouseOver est pris en compte.

Je voudrais savoir comment remédier à ce problème, merci d'avance

"If debbugging is the process of removing bugs, then programming must be the process of putting them in." (Edsger Dijkstra)

Darkodam

17 août 2010 à 18:06:26

Bonjour,

Pourrais-tu nous donner les codes sources de tes fichiers (html et js) ?

schadocalex

17 août 2010 à 18:19:42

Oui bien sûr :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Nom du site</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
		<script language="JavaScript">
			function setOpacity(id, opacity)
			{
				var element = document.getElementById(id);
				element.style.opacity = (opacity/100);
				element.style.filter = 'alpha(opacity='+opacity+')'; // IE
				element.style.display = (opacity == 0 ? 'none' : '');
			}

			function fade(id, out)
			{
				if(out == 1) // Si out est à 1 c'est que l'on veut effacer
				{
					setOpacity('txt_'+id, 0)
					setOpacity(id, 60)
				}
				else
				{
					for(var i=0; i<=5; i++)
					{
						var opacity_txt =i * 20;
						var opacity = 60 + i * 8;
						setTimeout('setOpacity("txt_'+id+'", '+opacity_txt+')', i*100);
						setTimeout('setOpacity("'+id+'", '+opacity+')', i*100);
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="corps" >
			<img src="img/accueil.png" id="icone1" style="width:64px;height:64px;opacity:0.8;filter:alpha(opacity=60);" onmouseover="fade('icone2', 1);fade('icone3', 1);fade('icone1', 0)" onmouseout="fade('icone1', 1)" />
			<img src="img/CQFR.png" id="icone2" style="width:64px;height:64px;opacity:0.8;filter:alpha(opacity=60);" onmouseover="fade('icone1', 1);fade('icone3', 1);fade('icone2', 0)" onmouseout="fade('icone2', 1)" />
			<img src="img/sexercer.png" id="icone3" style="width:64px;height:64px;opacity:0.8;filter:alpha(opacity=60);" onmouseover="fade('icone1', 1);fade('icone2', 1);fade('icone3', 0)" onmouseout="fade('icone3', 1)" />
			<p id="txt_icone1" style="display:none;" >Accueil</p>
			<p id="txt_icone2" style="display:none;" >CQFR</p>
			<p id="txt_icone3" style="display:none;" >S'exercer</p>
		</div>
	</body>
</html>

J'ai essayé de le rendre compatible IE mais IE fonctionne pas où je suis, donc je ne sais pas si ça fonctionne sous IE

"If debbugging is the process of removing bugs, then programming must be the process of putting them in." (Edsger Dijkstra)

Nek'

17 août 2010 à 19:14:05

Totalement normal.

Tu ne fais pas de setTimout quand tu passes au onMouseOut.
Revoit la logique de ton code !

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

schadocalex

17 août 2010 à 19:16:23

Et ?

setTimOut c'est pour retarder un évènement. Il se trouve que je veux changer l'opacité instantanément, donc pas de setTimeOut.

"If debbugging is the process of removing bugs, then programming must be the process of putting them in." (Edsger Dijkstra)

Nek'

17 août 2010 à 19:20:04

Excuse moi ! Je n'ai pas fait attention à ton problème que j'ai pris pour un autre

.

Donc pour ton problème en fait ce que je te conseilles c'est de mettre ton setTimeout dans une variable, ainsi quand la souris sort de l'image tu mets cette variable à FALSE.

Le setTimeout sera annulé et ainsi la valeur de ton opacité ne sera pas surmodifiée

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

schadocalex

17 août 2010 à 19:24:13

J'avais déjà essayé, avec clearTimeout(), mais ça n'avais rien changer. Je pense que le problème vient du fait que les évènements ne sont pas gérés pendant l'exécution d'une fonction.

Enfin, je vais encore essayer avec clearTimeout()

"If debbugging is the process of removing bugs, then programming must be the process of putting them in." (Edsger Dijkstra)

Nek'

17 août 2010 à 19:26:29

Négatif, les évènements sont parfaitement exécutés pendant l'exécution d'une fonction, tu peux t'en convaincre en alongeant ton effet et ajoutant un onclick="alert('paf le chien');" par exemple

.

clearTimeout() est plus propre, bien joué, je l'avais oublié lui

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

schadocalex

17 août 2010 à 19:47:04

Y'a un truc avec clearTimeout(), voici mon code (qui ne fait plus rien maintenant). Je crois que j'ai mal utilisé setTimeout() et clearTimeout() :

function fade(id, out)
{
	if(out == 1) // Si out est à 1 c'est que l'on veut effacer instantanément
	{
		for(var i = 1; i <= 10; i++)
			if(typeof(time_id[id][i]) != 'undefined')
				clearTimeout(time_id[id][i]);
		setOpacity('txt_'+id, 0);
		setOpacity(id, 60);
	}
	else
	{				
		for(var i = 1; i <= 5; i++)
		{
			var opacity_txt =i * 20;
			var opacity = 60 + i * 8;
			var time_id[id][i] = setTimeout('setOpacity("txt_'+id+'", '+opacity_txt+')', i*100);
			var time_id[id][i+5] = setTimeout('setOpacity("'+id+'", '+opacity+')', i*100);
		}
	}
}

"If debbugging is the process of removing bugs, then programming must be the process of putting them in." (Edsger Dijkstra)

Nek'

18 août 2010 à 12:54:18

Attention à la portée des variables.

Tes variables sont détruites après l'exécution de ta fonction !

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

schadocalex

18 août 2010 à 13:57:36

Ca ne marche pas, j'ai essayé avec static var, avec une variable globale, ça fait plus rien du coup.
Voici mon script actuel :

function fade(id, out)
{
	for(var i = 1; i <= 5; i++)
	{
		if(out) // Si out est à 1 c'est que l'on veut effacer
		{
			var opacity_txt = 100 - i * 20;
			var opacity = 100 - i * 8;
		}
		else
		{
			var opacity_txt = i * 20;
			var opacity = 60 + i * 8;
		}
		setTimeout('setOpacity("txt_'+id+'", '+opacity_txt+')', i*100);
		setTimeout('setOpacity("'+id+'", '+opacity+')', i*100);
	}
}

et mon html :

<table id="icone_menu" >
	<tr>
		<td><img src="img/accueil.png" id="icone1" style="opacity:0.8;filter:alpha(opacity=60);" onmouseover="fade('icone1', 0)" onmouseout="fade('icone1', 1)" /></td>
		<td><img src="img/CQFR.png" id="icone2" style="opacity:0.8;filter:alpha(opacity=60);" onmouseover="fade('icone2', 0)" onmouseout="fade('icone2', 1)" /></td>
		<td><img src="img/sexercer.png" id="icone3" style="opacity:0.8;filter:alpha(opacity=60);" onmouseover="fade('icone3', 0)" onmouseout="fade('icone3', 1)" /></td>
	</tr>
	<tr height="25px;" >
		<td style="padding-left:8px;" ><span id="txt_icone1" style="display:none;text-align:center;" >Accueil</span></td>
		<td style="padding-left:10px;" ><span id="txt_icone2" style="display:none;text-align:center;" >CQFR</span></td>
		<td><span id="txt_icone3" style="display:none;text-align:center;" >S'exercer</span></td>
	</tr>
</table>

Mon seul problème maintenant, c'est que j'arrive pas à arrêter le fade qui affiche le texte, les deux fade se font en même temps quand on va vite.

"If debbugging is the process of removing bugs, then programming must be the process of putting them in." (Edsger Dijkstra)

Nek'

19 août 2010 à 19:44:15

Je reprend le code de ton post précédent en y ajoutant la modification sur les variables:

var opacity_txt, opacity, time_id = new Array()

function fade(id, out)
{
	if(out == 1) // Si out est à 1 c'est que l'on veut effacer instantanément
	{
		for(var i = 1; i <= 10; i++)
			if(typeof(time_id[id][i]) != 'undefined')
				clearTimeout(time_id[id][i]);
		setOpacity('txt_'+id, 0);
		setOpacity(id, 60);
	}
	else
	{				
		for(var i = 1; i <= 5; i++)
		{
			opacity_txt =i * 20;
			opacity = 60 + i * 8;
			time_id[id][i] = setTimeout('setOpacity("txt_'+id+'", '+opacity_txt+')', i*100);
			time_id[id][i+5] = setTimeout('setOpacity("'+id+'", '+opacity+')', i*100);
		}
	}
}

Remarque: normalement pour un effet de ce genre tu n'as aucunement besoin d'un array (je pense à time_id) pour tes setTimeout, une variable suffit, une seule d'ailleurs car un seul setTimeout est nécessaire !
Pour moi ton script est à revoir...

Bien entendu n'hésite pas à me poser des questions, cependant malgré la simplicité de la chose ne compte pas sur moi pour faire ton travail

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

schadocalex

19 août 2010 à 21:13:42

Ton script ne fonctionne pas, rien ne se passe. J'avais déjà essayé, je te l'ai dis. Comment peut-on refaire le script, avec une fonction récursive ?

"If debbugging is the process of removing bugs, then programming must be the process of putting them in." (Edsger Dijkstra)

Nek'

19 août 2010 à 22:31:41

Attention à la façon dont du t'exprime, j'ai compris que tu avais essayé en utilisant les mots clés "static" et "var" !

Pour faire ton script à priori il te faut deux fonctions, une qui lance l'autre en fait.
Une fonction qui gère l'opacité de ton élément (l'effet) et une autre fonction qui va servir à gérer cet effet (l'arrêter ou le lancer quoi).

Voici une base possible:

var time;
function setOpacity(element [, to]) { // Je rajoute "to", un attribut où on donnera l'opacité max, mais bon ce n'est pas du tout obligatoire 
// Le code qui permet d'ajouter de l'opacité, attention à Internet Explorer qui a une façon particulière de la gérer  .
// N'oublie pas non plus que javascript peut se révéler imprécis. L'idéal serait donc d'arrondir les valeurs ou au moins de régler la valeur à la fin
}
function switchOpacity(element) { // pareil évidemment on veut l'élément concerné, alors là c'est soit l'id soit l'élément direct, on s'en fou il le faut pour faire suivre à la fonction suivante !
// fonction qui gère en gros le ON ou OFF de l'opacité
}

Par contre si tu pouvais être un peu plus chaleureux dans tes messages... ça ne serait pas de refus, j'ai l'impression de te faire chier alors que je cherches à t'aider !

Bonne chance.

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

schadocalex

19 août 2010 à 22:48:10

Désolé, je n'ai jamais été très doué pour expliquer

Et désolé aussi de sembler désagréable, ce n'est pas du tout ma pensée.

Donc, pour la fonction setOpacity, elle fonctionne très bien, et comme c'est moi qui envoie l'opacité, je sais d'avance si il y a un risque d'imprécision. Dans mon cas, je ne pense pas qu'améliorer cette fonction soit nécessaire. Pour la transparence sur IE, j'y est pensé, et ça à l'air de fonctionner

Je vais donc essayer de rendre la fonction fade récursive, juste, je ne sais pas gérer le temps, à part setTimeout(), je ne connais pas d'autres fonctions (mis à part time(), mais je ne sais pas ce qu'elle renvoie : un timestamp ?) Je vais regarder sur internet

EDIT : Ne me demande pas comment j'ai fait, mais j'y suis arrivé. Voici mon code final :

var outAct = new Array(), opacity = new Array(), opacity_txt = new Array();

function fade(id, out)
{	
	if(typeof(outAct[id]) == 'undefined')
		outAct[id] = out;
	if(typeof(opacity[id]) == 'undefined')
		opacity[id] = 50;
	if(typeof(opacity_txt[id]) == 'undefined')
		opacity_txt[id] = 0;

	if(out != outAct[id])
		setTimeout('fade("'+id+'", '+out+')', 100);
	else
	{
		if((out && opacity[id] == 50) || (!out && opacity[id] == 100))
			outAct[id] = !outAct[id];
		else
		{
			if(out)
			{
				opacity_txt[id] -= 20;
				opacity[id] -= 10;
			}
			else
			{
				opacity_txt[id] += 20;
				opacity[id] += 10;
			}
			setOpacity('txt_'+id, opacity_txt[id]);
			setOpacity(id, opacity[id]);
			setTimeout('fade("'+id+'", '+out+')', 100);
		}
	}
}

C'est loin d'être parfait, mais ça fonctionne. merci encore de ton aide

"If debbugging is the process of removing bugs, then programming must be the process of putting them in." (Edsger Dijkstra)

schadocalex

24 août 2010 à 0:10:55

Je UP pour dire que j'avais éditer, et que j'ai amélioré le script :

function setOpacity(id, opacity)
{
	var element = document.getElementById(id);
	element.style.opacity = (opacity/100);
	element.style.filter = 'alpha(opacity='+opacity+')'; // IE
	element.style.display = (opacity == 0 ? 'none' : '');
}

var outAct = new Array(), opacity = new Array(), arret = new Array();

function changerTxt(txt)
{
	document.getElementById('menu_txt').innerHTML = txt;
}

function fade(id, out)
{
	if(typeof(outAct[id]) == 'undefined')
		outAct[id] = out;
	if(typeof(opacity[id]) == 'undefined')
		opacity[id] = 50;
	if(typeof(arret[id]) == 'undefined')
		arret[id] = false;
	
	if(arret[id])
		arret[id] = false;
	else
	{
		if(out != outAct[id])
		{
			setTimeout('fade("'+id+'", '+out+')', 100);
			arret[id] = true;
			outAct[id] = !outAct[id];
		}
		else
		{
			if((out && opacity[id] == 50) || (!out && opacity[id] == 100))
			{
				outAct[id] = !outAct[id];
				if(opacity['icone1'] == opacity['icone2'] && opacity['icone1'] == opacity['icone3'] && opacity['icone1'] == 50)
					changerTxt('');
			}
			else
			{
				if(out)
					opacity[id] -= 10;
				else
					opacity[id] += 10;
				setOpacity(id, opacity[id]);
				setTimeout('fade("'+id+'", '+out+')', 100);
			}
		}
	}
}

Maintenant tout fonctionne nickel. Encore merci de ton aide

"If debbugging is the process of removing bugs, then programming must be the process of putting them in." (Edsger Dijkstra)

onMouseOut

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

onMouseOut

Quand la souris va trop vite...

onMouseOut

Supprimer

Modérer

Signaler le message aux modérateurs