Seitenelemente dem Mauszeiger hinterherwandern lassen

als ultimative Antwort auf FAQ
(FAQ = frequently asked question = häufig (immer und immer wieder) gestellte Frage)



Zuerst geht mein Dank an DJ Enzo, der eine frühere Version dieses Beispiels überarbeitet hat, damit es auch unter Netscape6 geht und sich nicht an den Rollbalken vom MSIE stört.
Ich habe es dann nochmal überarbeitet und jetzt sieht es so aus, wie es jetzt aussieht.

Anhand des Beispiels soll die Lösung folgenden Problems vorgestellt werden:

Problemstellung:

Ein Objekt (div-Sektion) auf einer HTML-Seite ist in seiner Lage der Position des Mauszeigers anzupassen.

Allgemeines zur Lösung:

Im Folgenden wird eine Lösung vorgestellt, die in Konqueror, Mozilla/Netscape, Opera und MS Internet Explorer sauber arbeitet.



Beispiel:

Eine div-Sektion folgt dem Mauszeiger (beispiel/mauszieh.html)



Quelltext von mauszieh.html:

Im folgenden Quelltext sind wichtige Bereiche rot und Kommentare grün markiert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
JavaScript - Mausspur ziehen
</title>
<script type="text/javascript">
<!--
var MicrosoftModel=0;
var xplus=10,yplus=10;
var runnerobject;

                          /* div-Sektion "runner" bewegen: */
function MouseAction(mausx,mausy)
{
  runnerobject.left=mausx+xplus;
  runnerobject.top=mausy+yplus;
}

                       /* das onMouseMove-event auswerten: */
function MouseMove(event)
{
  var mausx,mausy;
  if (typeof(event)!="object")              /* kein event? */
    return;
  if (MicrosoftModel)                     /* MSIE: ------- */
  {
    mausx=event.clientX;
    mausy=event.clientY;
    if (document.body.scrollLeft)
      mausx+=document.body.scrollLeft;
    if (document.body.scrollTop)
      mausy+=document.body.scrollTop;
  }
  else                                    /* Netscape: --- */
  {
    mausx=event.pageX;
    mausy=event.pageY;
  }
  MouseAction(mausx,mausy);
}

          /* Behandlung des Ereignisses und Objekt setzen: */
function MouseInit()
{
  if (document.all)         /* MSIE, Konqueror, Opera: --- */
  {
    MicrosoftModel=1;
    window.onmousemove=MouseMove;
    runnerobject=document.all.runner.style;
  }
  if (!(MicrosoftModel))                  /* Netscape: --- */
  {
    if (typeof(document.addEventListener)=="function")
                                         /* Netscape6: --- */
    {
      document.addEventListener("mousemove",MouseMove,true);
      runnerobject=document.getElementById("runner").style;
    }
    else
    if (document.runner)                 /* Netscape4: --- */
    {
      window.captureEvents(Event.MOUSEMOVE);
      window.onmousemove=MouseMove;
      runnerobject=document.runner;
    }
    else                              /* anderer Browser : */
      alert("Dein Browser kann das nicht!");
  }
}
//-->
</script>
</head>

<!-- onLoad="MouseInit();" veranlasst Netscape zur Ereignisbehandlung,
     onMouseMove="MouseMove(event);" tut das im MSIE: -->
<body
  onLoad="MouseInit();"
  onMouseMove="MouseMove(event);"
>

<a href="../index.html">zur&uuml;ck zur Dokumentation</a>

<!-- Diese div-Sektion "runner" wird der Maus folgen: -->
<div name="runner" id="runner" style="position:absolute; left:10; top:50;">
<table border="0" cellpadding="10" cellspacing="0">
<tr><td style="background:#E0E0FF">
<span style="white-space:nowrap;">Dieser sinnlose Text soll der Maus folgen</span>
</td></tr>
</table>
</div>

</body>
</html>
Autor: Ulrich Kritzner