compatibilité avec un script sous IE.
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:
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:
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;
}
} |
