[Js] Bouger un calque par rapport à la position de la souris

Version imprimable

Bonjour à tous,

J'ai développé un script JavaScript dans une page XSL me permettant de déplacer un calque en fonction de la position de la souris. Mon script marche trés bien sous FireFox mais pas sous IE. Sous IE, mon calque reste dans un coin et ne prend pas en compte le déplacement de la souris.

Voici mon script Js :

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
31
32
33
<script language="JavaScript">
<![CDATA[
 
// Fonction de création des listeners de position de la souris et affichage du calque
function montreDesc() {
	if(document.all) {
		window.attachEvent('onmousemove', mouvement)
	} else
		window.addEventListener('mousemove', mouvement , false)
	document.getElementById('calqueDesc').style.visibility = "visible";
}
 
// Fonction effectuant le mouvement du calque par rapport à la souris
function mouvement(e) {
	alert("Entrée");
	x = (navigator.appName=="Netscape") ? e.pageX : event.x + document.body.scrollLeft;
	y = (navigator.appName=="Netscape") ? e.pageY : event.y + document.body.scrollTop;
	alert("Passage");
	document.getElementById('calqueDesc').style.left = x + 10 + 'px';
	document.getElementById('calqueDesc').style.top = y + 20 + 'px';
}
 
// Fonction de destruction des listeners de position de la souris et masquage du calque
function cacheDesc() {
	if(document.all)
		window.detachEvent('onmousemove', mouvement);
	else
		window.removeEventListener('mousemove', mouvement , false);
	document.getElementById('calqueDesc').style.visibility = "hidden";
}
 
]]>
</script>

Pour informations, les alert("Entrée") et alert("Passage") ne s'affichent pas.

et la partie l'utilisant :

Code:

1
2
3
4
5
6
7
8
9
10
11
<td class="lien" onmouseout="this.className='tdHors'; cacheDesc()">
	<xsl:attribute name="onmouseover">
		this.className='tdDessus'; document.getElementById('calqueDesc').innerHTML = '<xsl:value-of select="@description" />'; montreDesc()
	</xsl:attribute>
	<a target="_blank">
		<xsl:attribute name="href">
			<xsl:value-of select="@url" />
		</xsl:attribute>
		<xsl:value-of select="@titre" />
	</a>
</td>

Pourriez-vous me donner un petit coup de main ?

Merci d'avance ;)

10/04/2008, 16h51
Matthieu2000

as tu un attribut style dans ton calque 'calqueDesc'?
10/04/2008, 16h54
E.Bzz

Bonjour,

Code:

document.onmousemove = mouvement;

?

A+
10/04/2008, 17h14
hedgehog

Matthieu2000 :

Oui j'ai un attribut style dans mon calque :

Code:

visibility:hidden;

E.Bzz :

J'ai essayé mais même probléme.
10/04/2008, 17h18
E.Bzz

As-tu essayé tout bêtement

Code:

window.addEventListener('mousemove', mouvement , true);

?

A+
10/04/2008, 17h26
hedgehog

Je viens d'essayer toujours pareil.

les objects que tu traites ne gèrent pas ces événements

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function montreDesc(me) {
 
	if(document.all) {
		if(me)
		me.attachEvent('onmousemove', mouvement)
	} else
		window.document.addEventListener('mousemove', mouvement , false)
	document.getElementById('calqueDesc').style.visibility = "visible";
}
 
...
<xsl:attribute name="onmouseover">
		this.className='tdDessus'; document.getElementById('calqueDesc').innerHTML = '<xsl:value-of select="@description" />'; montreDesc(this)
	</xsl:attribute>

11/04/2008, 09h41
hedgehog

Merci Matthieu2000, le probléme est réglé. ;)

Peux-tu m'expliquer plus précisemment ce qui n'allait pas dans mon script ?
Sous IE, window ne gére pas attachEvent() ?
11/04/2008, 16h52
Matthieu2000

tu a mis la gestion un peu trop "haut"

Citation:

window

->
onbeforeunload
onafterprint
onerror
onresize
onblur
onload
onscroll
onfocus
onbeforeprint
onunload
onhelp
.

sinon

Citation:

document.attachEvent

...
11/04/2008, 17h00
hedgehog

Ok merci de ces précisions ;)

Code:

1
2
3
4
5
6
7
8
for( elt in window){
	if(elt.indexOf("on")==0)
		alert(elt);
}	
for( elt in document){	
	if(elt.indexOf("on")==0)
		alert(elt);
}