cas d'un onmouseover interdit

Version imprimable

04/05/2007, 12h17
licorne

cas d'un onmouseover interdit

Bonjour,

Voilà je me "bats" avec ce problème depuis un bon moment.

J'ai fait un calendrier annuel avec une suite div collés.
Des changements de couleur s'éffectuent avec les évènements onmousedown, onmouseover et onmouseup.
Ca fonctionne pas trop mal, sauf que régulièrement quand je faits un onmousedown et un onmouseover simultanément un signe interdit s'affiche et perturbe en suite le fonctionnement du prog.

Avez-vous une idée à ce sujet ?

Merci :)
04/05/2007, 14h06
licorne

Peut-être que mon explication n'est pas tout à fait claire.
En fait l'interdiction est matérialisée par un cercle noir barré lorsque la souris passe sur la div d'à côté.
Cela ne se produit pas au premier coup.

Je galère beaucoup sur ce problème. :(
04/05/2007, 14h12
deY!

il y a peut etre un conflit entre tes fonctions.
tu veux que le changement de couleur s'effectue sur le over ? ou le down ?

un peu code serait mieux :)

Je te le livres tel quel, si c'est pas assez clair, je te le renvoies autrement.;)

Code:

$ret.="<div id='jour[".$x."]' style='position:absolute; visibility:visible; top:".$top."px; left:".$left."px; width:23px; height:23px; z-index:1;border:1px solid #FFFFFF;' onmousedown='tab_cal = Array(365); tab_cal[".$x."] = \"D\"; if(document.getElementById(\"jour[".$x."]\").style.backgroundColor == \"#b6dada\") document.getElementById(\"jour[".$x."]\").style.backgroundColor = \"#ffffa8\"; else if(document.getElementById(\"jour[".$x."]\").style.backgroundColor == \"#ffffa8\") document.getElementById(\"jour[".$x."]\").style.backgroundColor = \"#b6dada\";' onmouseup='for (i=0;i<365;i++) v = tab_cal.pop();' onmouseover='if(document.getElementById(\"jour[".$x."]\").style.backgroundColor != \"#c0c0c0\" && tab_cal.length > 0) select_mdate(".$x.");'>";

La fonction :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function select_mdate(x) { var deb = 999; var couleur = ""; //alert(x); // Recherche de la case enfoncée for(i=0;i<=x;i++) if(tab_cal[i] == "D") { deb = i; if (document.getElementById("jour["+deb+"]").style.backgroundColor != "#c0c0c0") couleur = document.getElementById("jour["+deb+"]").style.backgroundColor; } // Applique la couleur de la case enfoncée aux cases survolées if (x > deb && deb != 999) for(i=deb;i<=x;i++) if (document.getElementById("jour["+i+"]").style.backgroundColor != "#c0c0c0") document.getElementById("jour["+i+"]").style.backgroundColor = couleur; }

04/05/2007, 14h52
deY!

Bon.... deja je me suis arreter de lire... dans tes evennements... ne mets pas de code javascript... appel une fonction qui s'occupera d'initialiser le tout.

en javascript tu as l'objet

Code:

this

c'est beau.. si tu fais

Code:

<div id="mydiv" onmousedown="javascript:myFunction(this)">

c'est pareil que

Code:

<div id="mydiv" onmousedown="javascript:myFunction(document.getElementById('mydiv'))">

Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ret.="<div id='jour[".$x."]' style='position:absolute; visibility:visible; top:".$top."px; left:".$left."px; width:23px; height:23px; z-index:1;border:1px solid #FFFFFF;' 
 
onmousedown='action_mdown(".$x.");' 
 
onmouseup='for (i=0;i<365;i++) v = tab_cal.pop();' 
 
onmouseover='if(document.getElementById(\"jour[".$x."]\").style.backgroundColor != \"#c0c0c0\" && tab_cal.length > 0) select_mdate(".$x.");'>";
 
if ($cal[1] == "Samedi" || $cal[1] == "Dimanche")
	$ret.="<script>document.getElementById('jour[".$x."]').style.backgroundColor = '#c0c0c0';</script>";
else
	$ret.="<script>document.getElementById('jour[".$x."]').style.backgroundColor = '#b6dada';</script>";
 
$ret.="</div>";

les fonctions :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function action_mdown(x) 
{
	tab_cal = Array(365); 
	tab_cal[x] = "D"; 
 
	if(document.getElementById("jour["+x+"]").style.backgroundColor == "#b6dada") 
		document.getElementById("jour["+x+"]").style.backgroundColor = "#ffffa8"; 
	else 
		if(document.getElementById("jour["+x+"]").style.backgroundColor == "#ffffa8") 
			document.getElementById("jour["+x+"]").style.backgroundColor = "#b6dada";
 
}

En ce qui concerne ta remarque sur this, comment appeler une fonction avec un paramètre php tel que

Code:

action_mover(this,x)

?

J'ai remarqué que lorsque j'enlève tous les contrôles sur les évènements le problème existe toujours.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ret.="<div id='jour[".$x."]' style='position:absolute; visibility:visible; top:".$top."px; left:".$left."px; width:23px; height:23px; z-index:1;border:1px solid #FFFFFF;' 
 
onmousedown='action_mdown(this, ".$x.");' 
 
onmouseup='for (i=0;i<365;i++) v = tab_cal.pop();' 
 
onmouseover='if(this.style.backgroundColor != \"#c0c0c0\" && tab_cal.length > 0) select_mdate(".$x.");'>";
 
if ($cal[1] == "Samedi" || $cal[1] == "Dimanche")
	$ret.="<script>document.getElementById('jour[".$x."]').style.backgroundColor = '#c0c0c0';</script>";
else
	$ret.="<script>document.getElementById('jour[".$x."]').style.backgroundColor = '#b6dada';</script>";
 
$ret.="</div>";

Code:

1
2
3
4
5
6
7
8
9
function action_mdown(div,x) 
{
	tab_cal = Array(365); 
	tab_cal[x] = "D"; 
 
	if(div.style.backgroundColor == "#b6dada") 
		div.style.backgroundColor = "#ffffa8"; 
	else if(div.style.backgroundColor == "#ffffa8") 
			div.style.backgroundColor = "#b6dada";

Pourquoi tu ne fais pas un tableau ?

04/05/2007, 15h49
licorne

J'avais commencé par un tableau mais les carrés n'étaient pas rectilignes comme les div.

Autre chose

Code:

<script type="text/javascript">

la navigateur comprend mieux...

voire

Code:

1
2
3
4
5
6
$ret.="<div id='jour[".$x."]' style='position:absolute; visibility:visible; top:".$top."px; left:".$left."px; width:23px; height:23px; z-index:1;border:1px solid #FFFFFF;"; 
 
if ($cal[1] == "Samedi" || $cal[1] == "Dimanche") 
$ret.="background-color:'#C0C0C0';'";
else
$ret.="background-color:'#B6DADA';'";

04/05/2007, 16h23
licorne

Ca ne change rien...
04/05/2007, 16h28
deY!

Je simplifiais ton code pour y voir plus clair...

quand tu dis

Citation:

quand je faits un onmousedown et un onmouseover simultanément

ça veut dire que tu bouge ta souris alors que tu appuie toujours sur le bouton ?
c'est normal le signe interdit alors... ça veut qu'une partie du texte affiché est selectionner et qu'il t'interdit de le deplacer...

Aprés le fait qu'il y une erreur javascript, ça veut juste dire que tes fonctions onmousedown et onmouseover "se gene", tout simplement parcque modifie toutes les deux les même elements.

Selectionne du texte dans la page, et "tire" le ailleurs, tu devrais avec le cercle barré aussi...
04/05/2007, 16h41
licorne

Tout cela n'est pas très encourageant...
Je cherche à matérialiser une sélection de l'utilisateur.
Quand il appuie sur la souris puis la déplace sur les cases voisines sans la relacher les cases change de couleur.
Est-ce possible en JavaScript ?
04/05/2007, 17h07
licorne

Tu m'as mis sur la voie avec la sélection du texte.
Pour empècher la sélection :

Code:

document.onselectstart=new Function ('return false');

Merci pour ta patiente et bon week-end. ;)
04/05/2007, 17h23
deY!

Je connaissais pas cette astuce merci à toi aussi, ça peut toujours me servir :yaisse2: