Doctype et image qui suit le curseur

bonjour,

Petit problème...:
J'ai un code javascript qui me permet d'afficher deux images suivant le curseur de la souris.

Mais voilà dès que je mets une déclaration de DOCTYPE, les images ne suivent plus la souris et restent coincées en haut à gauche de l'écran...

voici le code :

var x = 0;
var y = 0;

if (document.getElementById)
   {
   if(navigator.appName.substring(0,3) == "Net")
   document.captureEvents(Event.mousemove);
   document.onmousemove = Pos_Souris;
   window.onload = Bouge_Image;
   }

function Pos_Souris(e)
   {
   x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
   y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
   }

posX = 0;
posY = 0;
anim = true;

function Bouge_Image()
   {
   if (document.getElementById && anim)
      {
      posX = posX+(((x-posX)-30)/2);
      posY = posY+(((y-posY)-45)/2);
      document.getElementById("curseur1").style.top=posY;
      document.getElementById("curseur1").style.left=posX;
      document.getElementById("curseur2").style.top=posY;
      document.getElementById("curseur2").style.left=posX+60;
      tempo = setTimeout("Bouge_Image()", 2);
      }
   }

if(document.getElementById)
   {
   document.write('<DIV ID=curseur1 style="position: absolute; display: none">');
   document.write('<IMG SRC="images/script/curseur1.gif" ALT="">');
   document.write('</DIV>');
   document.write('<DIV ID=curseur2 style="position: absolute; display: none">');
   document.write('<IMG SRC="images/script/curseur2.gif" ALT="">');
   document.write('</DIV>');

   }

l'image apparaît uniquement sur un <div> survolé donc voici aussi le code :

<div id="header" onMouseOver="document.getElementById('curseur1').style.display='block'; 

document.getElementById('curseur2').style.display='block';" onMouseOut="document.getElementById('curseur1').style.display='none'; 

document.getElementById('curseur2').style.display='none';"><img src="images/mise_en_page/bh_transparent.gif" alt="" width="764" height="185" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="613,10,750,173" href="index.php?rubrique=devis" />
<area shape="rect" coords="500,10,590,172" href="index.php?rubrique=outils" />
<area shape="rect" coords="345,10,468,172" href="index.php?rubrique=parcours" />
<area shape="rect" coords="220,10,315,172" href="index.php" />
</map></div>

Je suppose que le problème vient de la détection de la position du curseur de la souris, mais toute piste de recherche sera la bienvenue !

Merci
Modifié par eacute (10 Jul 2006 - 14:27)