Bonjour,
J'ai un problème de compatibilité avec un script (trouvé sur le net) et IE. c'est un script qui permet d'afficher qq images derrière le curseur (voir
Mon site. 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 ?
<script language="JavaScript">
/*
Elastic Trail script (By Philip Winston @ pwinston@yahoo.com, URL:http://members.xoom.com/ebullets)
Script trouvé jejavascript.net
*/
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
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;
}
}