Nun, im Script befinden sich drei Funktionen:
1. updateWMTT(e)
Diese Funktion verfolgt die Mousposition und zieht des Text-/Grafikfenster ständig hinterher.
2. showWMTT(id,plx,ptx)
Diese Funktion zeigt das text-/Grafikfenster an, wenn die Mous sich über den definierten bereich befindet (also bei Mousover). Das Mousover übergibt dabei drei Werte: a) die ID des anzuzeigenden "Layers", b) den horizentalen Abstand zum Mouszeiger und c) den vertikalen Abstand zum Mousezeiger: onmouseover="showWMTT('XX',10,-200)".
"XX" ist hier die ID des div-Tags, der linke Rand des Fenstes befindet sich 10 Pixel rechts vom Mousezeiger und der obere Rand 200 Pixel über dem Mouszeiger. Du kannst also jede beliebige Position bestimmen, wobei gilt: positive Zahlen bezeichnen die Position nach rechts oder nach unten, negative Zahlen nach links oder nach oben, immer gesehen vom Mousezeiger aus.
3. function hideWMTT()
schaltet die Anzeige durch onMouseout wieder aus, wenn der Linkbereich verlassen wird.
Alles klar?
Hier noch mal das komplette Script:
<html>
<head>
<title>Tooltips</title>
<script type="text/javascript" language="JavaScript">
<!--
wmtt = null;
pl = 0;
pt = 0;
document.onmousemove = updateWMTT;
function updateWMTT(e)
{
x = (document.all) ? window.event.x + document.body.scrollLeft: e.pageX;
y = (document.all) ? window.event.y : e.pageY;
if (wmtt != null)
{
wmtt.style.left = (x + pl) + "px";
wmtt.style.top = (y + pt) + "px";
}
}
function showWMTT(id,plx,ptx)
{
pl = plx;
pt = ptx;
wmtt = document.getElementById(id);
wmtt.style.display = "block"
}
function hideWMTT()
{
wmtt.style.display = "none";
}
//-->
</script>
<style type="text/css">
<!--
.tooltip {
padding:5px;
position: absolute;
display: none;
background-color:#FFFFFF;
font-size:11px;
font-weight:bold;
border:1px solid black;
}
-->
</style>
</head>
<body>
<center>[img]skylab.jpg[/img]</center>
<map name="sky">
<area shape="rect" href="#" coords="224,126,456,319" id="test" title="Wenn Javascript dekativiert ist steht hier einfach nur ein normaler Text." onmouseover="showWMTT('XX',10,-200)" onmouseout="hideWMTT()">
</map>
<div class="tooltip" id="XX">Mit solch einem Shuttle ist dieser
Satelit ins Orbit gebracht worden.
[img]spacecrafts_003.jpg[/img]
<center style="color#FF0000">... und Text unter dem Bild
geht natürlich auch noch ;-)
und noch ein Bild....
[img]space_51.jpg[/img]</center></div>
</body>
<script type="text/javascript" language="JavaScript">
<!--
document.getElementsByTagName("area")[0].title = "";
//-->
</script>
</html>
Alles anzeigen
Have fun 
Ronald
