Hi,
das Problem an so einem Skript ist, dass IE und der Rest diese Events anders behandeln, man muss also ein JavaScript schreiben, dass dies berücksichtigt.
Hier ist ein Skript das ich mal geschrieben (oder wo abgeschaut) habe. Du kannst es ja deinen Wünschen anpassen:
1.) du musst einen mouse positions listener registieren:
(die Funktion "handleMouseMove" kommt unter 3.) )
// eins ist für IE, das andere für andere browser
if (document.addEventListener) {
document.addEventListener("mousemove", handleMouseMove, false);
}
else {
document.onmousemove = handleMouseMove;
}
2.) du brauchst variablen in dem die aktuelle position gespeichert wird:
var mouseX = 0;
var mouseY = 0;
3.) die Funktion handleMouseMove
function handleMouseMove(e) {
// der IE übergibt e nicht
if (!e) {
var e = window.event;
}
if (document.all) {
// if IE
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
} else {
// alle anderen browser
mouseX = e.pageX
mouseY = e.pageY
}
if (mouseX < 0){mouseX = 0}
if (mouseY < 0){mouseY = 0}
document.getElementById("infodiv").style.left = (mouseX-100) + "px";
document.getElementById("infodiv").style.top = (mouseY - 100) + "px";
// warum das drin ist, weiß ich nicht mehr ;)
return true
}
4.) jetzt 2 funktionen zum ein und ausschalten der info:
function showInfo() {
text = "was auch immer ;)";
document.getElementById("infodiv").innerHTML = text;
document.getElementById("infodiv").style.display = "";
}
function hideInfo() {
document.getElementById("infodiv").style.display = "none";
}
5.) das muss irgendwo in die seite:
<div id="infodiv" style="display:none;position:absolute;height:160px;width:250px;border:2px solid red;padding:5px;background-color:black;top:1px;left:1px;"></div>
6.) so baut man dann die fliegend Info irgendwo ein:
<div onmouseover='showInfo();' onmouseout='hideInfo();'>
hier kommt der bereich der ge-infot werden soll
</div>
Zuletzt modifiziert von Surangumal am 04.01.2009 - 23:45:45
