compatibilité avec un script sous IE.

**bofff** · 11/01/2010, 20h24

Bonjour,

J'ai un problème de compatibilité avec un script (trouvé sur le net) sous IE. c'est un script qui permet d'afficher qq images derrière le curseur. Avec IE le script fonctionne correctement sur les cotés de pages, mais pas sur le "centre". Avec Firefox aucun problème.
Le problème venant du fait que j'utilise 3 div principaux avec l'attribut position:relative. J'ai du utiliser cet attribut pour le placement de mes images dans des "div pa" (position:absolute). Je voudrais garder ces "div pa" qui me permettent un placement plus rapide sous dreamviewer.

Je suis novice avec le javascript...Mais je pense que mon script recupère des positions X et Y relatives sous IE et sous firefox il récupère des positions absolues.

Avez-vous une solution ? forcer le script a récupérer des positions absolues de X et Y ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script language="JavaScript">
var nDots = 6;/*Nbre d'image+1*/
var GRAVITY = +110; /*-=dessus +=dessous valeur=ecartement*/
var RESISTANCE = 15;/*effet élasticité*/
</script>
<div id=dot0 style="HEIGHT: 21px; POSITION: absolute; z-index:60; VISIBILITY: hidden; WIDTH: 16px"><img border=0 src="Images/effet_souris/1.gif"></div>
<div id=dot1 style="HEIGHT: 21px; POSITION: absolute; z-index:60; WIDTH: 16px"><img border=0 src="Images/effet_souris/1.gif"></div>
<div id=dot2 style="HEIGHT: 21px; POSITION: absolute; z-index:60; WIDTH: 16px"><img border=0 src="Images/effet_souris/2.gif"></div>
<div id=dot3 style="HEIGHT: 21px; POSITION: absolute; z-index:60; WIDTH: 16px"><img border=0 src="Images/effet_souris/3.gif"></div>
<div id=dot4 style="HEIGHT: 21px; POSITION: absolute; z-index:60; WIDTH: 16px"><img border=0 src="Images/effet_souris/4.gif"></div>
<div id=dot5 style="HEIGHT: 21px; POSITION: absolute; z-index:60; WIDTH: 16px"><img border=0 src="Images/effet_souris/5.gif"></div>
<script language="JavaScript" src="imagsouris.js"></script>

imagsouris.js

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 1;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;
var dots = new Array();
init();
 
function init() {
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}
 
for (i = 0; i < nDots; i++) {
document.getElementById("dot"+i).style.left = dots[i].X;
document.getElementById("dot"+i).style.top = dots[i].Y;
}
setTimeout("startanimate()", 1000);
 
}
function dot(i) {
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
}
 
function startanimate() {
setInterval("animate()", 20);
}
 
function setInitPositions(dots) {
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}
 
function MoveHandler(e) {
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
 
 
}
if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = MoveHandler;
} else {
 
document.onmousemove = MoveHandlerIE;
}
function vec(X, Y)
{
this.X = X;
this.Y = Y;
}
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}
function animate() {
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1;
}
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}
var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY);
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
var height, width;
if (isNetscape)
{
height = window.innerHeight + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
document.getElementById("dot"+i).style.left = dots[i].X;
document.getElementById("dot"+i).style.top = dots[i].Y;
}
}

**kimjoa** · 11/01/2010, 22h32

salut !!

J'ai en partie commencer à programmer en javascript avec ce script, que j'ai dépouiller, traficoter, maltraité ...

je crois avoir trouvé le probème

faut remplacer cette fonction

Code :

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

1
2
3
4
5
 
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
}

par

Code :

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

1
2
3
4
5
 
function MoveHandlerIE() {
Xpos = window.event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
Ypos = window.event.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
}

voilà !! bon mariage à toi

**bofff** · 11/01/2010, 22h41

Quelle rapidité

Merci bcp a toi ! Ça fonctionne nickel.

compatibilité avec un script sous IE.

JavaScript

Discussions similaires

Partager

Partager