Hallo Folks,
also ich muss erstmal zugeben das ich nicht sehr bewandert in Javascript bin. Habe ein Tooltip Skript geschrieben, welches aber einen Bug hat und einfach nicht klappen will.
Folgendes soll funktionieren (siehe Beispielcode):
Wenn ich über das "muh" div Element fahre, sollte ein neben meiner Maus das div Element auftauchen mit der Id "tooltip". Es wird zwar dargestellt und auch wieder ausgeblendet, aber leider unter dem ersten div-Element.
Irgendwie scheint die Funktion updateTT() nicht so zu klappen.
HTML
<html>
<head>
<script type="text/javascript">
tt = null;
document.onmousemove = updateTT;
function updateTT(e) {
x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
if (tt != null) {
tt.style.left = (x + 20) + "px";
tt.style.top = (y + 20) + "px";
}
}
function showTT() {
tt = document.getElementById("tooltip");
tt.style.display = "block";
}
function hideTT() {
tt.style.display = "none";
}
</script>
</head>
<body>
<div onmouseover="showTT()" onmouseout="hideTT()" style="width: 100px; height: 100px">muh</div>
<div id="tooltip" style="display:none;">[img]picture.jpg[/img]</div>
</body>
</html>
Alles anzeigen
Der Code ist natürlich nur ein Schnippsel, aber der Fehler tritt hier auch auf.
Irgendwelche Ideen warum tt.style.left und tt.style.top nicht richtig funktionieren?
Schonmal vielen Dank!