(The small remaining problems have moved so far from the subject of the beginning that I'm make a new thread for this script.)

I'm trying to enhance this javascript on two points:

1- I would like DOTSIZEHEIGTH and DOTSIZEWIDTH to be able to change in fonction of the object that's being processed

I had thought of something like "DOTSIZEHEIGTH = dots[i].obj.height;" placed in the adequate for{} ... (eventually by making DOTSIZEHEIGTH and DOTSIZEWIDTH vectors) ... but that doesn't work.
I'm sure there's a solution for this problem.

2- In Mozilla/Netscape etc ... the images don't bounce on the right and bottom sides of the window (nor on the bottom, but that's normal)


You may see this script at work here:

http://www.webisdead.net/xhtml-index-test.html
(index page under reconstruction)

and there (objects voluntarily bad-dimensioned, may cause the windows to "expand" ... just an esthetical purpose ...):

http://www.webisdead.net/megaptere

Code:
<div id="dot8" style="width:1; height:1; position:absolute; top:0; left:0; text-align:left; font-weight:bold"><a href="http://folding.webisdead.net">Folding@Home</a></div>
<div id="dot7" style="width:1; height:1; position:absolute; top:0; left:0;  visibility: hidden;"><img src="images/penguin01.gif"alt="Pingouin" /></div>
<div id="dot6" style="width:1; height:1; position:absolute; top:0; left:0;  visibility: hidden;"><img src="images/penguin01.gif" alt="Pingouin" /></div>
<div id="dot5" style="width:51; height:52; position:absolute; top:0; left:0; "><img src="images/penguin05.gif" alt="Pingouin" /></div>
<div id="dot4" style="width:35; height:60; position:absolute; top:0; left:0; "><img src="images/penguin04.gif" alt="Pingouin" /></div>
<div id="dot3" style="width:28; height:60; position:absolute; top:0; left:0; "><img src="images/penguin03.gif" alt="Pingouin" /></div>
<div id="dot2" style="width:32; height:60; position:absolute; top:0; left:0; "><img src="images/penguin02.gif" alt="Pingouin" /></div>
<div id="dot1" style="width:32; height:60; position:absolute; top:0; left:0; "><img src="images/penguin01.gif" alt="Pingouin" /></div>
<div id="dot0" style="width:1; height:1; position:absolute; top:0; left:0; visibility: hidden;"><img src="images/penguin01.gif" alt="Pingouin" /></div>
<script language="JavaScript" type="text/javascript"><!--
<!-- Original: Philip Winston (pwinston@yahoo.com) Web Site: <http://members.xoom.com/ebullets> -->
<!-- 'Scrolling Fix' by Troels Jakobsen <tjak@get2net.dk> -->
<!-- Two dimensions DOTSIZE adapted by Ludwig von 97 (http://www.webisdead.net) -->
<!-- Adapted for XTHML + Netscape/Mozilla/FireFox/... by GhislainLavoie and Ludwig von 97 (http://www.webisdead.net) on <http://www.editeurjavascript.com/forum>, thanks to Willy Duitt too -->
var nDots = 9;
var Xpos = 0;
var Ypos = 0;

var DELTAT = .01;
var SEGLEN = 5;
var SPRINGK = 6;
var MASS = 2;
var GRAVITY = 0;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZEHEIGHT = 60; //two dimensions dotsize adapted , must be equal to elements height (LV97)
var DOTSIZEWIDTH = 32; //two dimensions dotsize adapted , must be equal to elements width (LV97)
var BOUNCE = 0.60;
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);
}
if (!isNetscape) {
// I only know how to read the locations of the 
// <LI> items in IE
// skip this for now
// setInitPositions(dots)
}
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
dots[i].obj.top = dots[i].Y+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
}
if (isNetscape) {startanimate();}
else {
// let dots sit there for a few seconds
// since they're hiding on the real bullets
setTimeout("startanimate()", 3000);}}

function dot(i) {this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0;
this.obj = eval("document.getElementById('dot'+" + i + ").style");} // previously "if (isNetscape) {this.obj = eval("document.dot" + i);}" (GhislainLavoie)
                                                                    // previously "else {this.obj = eval("dot" + i + ".style");}}" (GhislainLavoie)

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 - DOTSIZEWIDTH; //two dimension dotsize adapted by LV97
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZEHEIGHT; //two dimension dotsize adapted by LV97
}
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.documentElement.scrollLeft; // previously "documentElement" (for XHTML) --> "body" (LV97)
Ypos = window.event.y + document.documentElement.scrollTop; // previously "documentElement" (for XHTML) --> "body" (LV97)
}
if (isNetscape) {
// "document.captureEvents(Event.MOUSEMOVE);" <-- removed by GhislainLavoie
document.onmousemove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}

function vec(X, Y)
{this.X = X;
this.Y = Y;}

// adds force in X and Y to spring for dot[i] on dot[j]
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.documentElement.clientHeight + document.documentElement.scrollTop; // previously "documentElement" (for XHTML) --> "body" (don't forget to se the DOTSIZEHEIGHT/WIDHT manually ! (for now))
width = document.documentElement.clientWidth + document.documentElement.scrollLeft; // previously "documentElement" (for XHTML) --> "body" (don't forget to se the DOTSIZEHEIGHT/WIDHT manually ! (for now))
}
if (dots[i].Y >=  height - DOTSIZEHEIGHT - 1) { //two dimensions dotsize adapted by LV97
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZEHEIGHT - 1; //two dimensions dotsize adapted by LV97
}
if (dots[i].X >= width - DOTSIZEWIDTH) { //two dimensions dotsize adapted by LV97
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZEWIDTH - 1; //two dimensions dotsize adapted by LV97
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
dots[i].obj.left = dots[i].X+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie			
dots[i].obj.top = dots[i].Y+"px"; // "+"px"" (XHTML related) suggested by GhislainLavoie
}}
--></script>