onmouseover Tabelle mit Mausverfolgung
Alexander
- javascript
Hallo Leute,
ich hab folgendes Problem. Ich will, dass eine Tabelle beim drübergehen über einen bestimmten Text direkt an der Position der Maus erscheint. Weiß einer, wie ich das genau hinbekommen kann?
Danke schon mal im Vorraus
Alex
Hi,
komplizierte Sache, eine Tabelle erscheinen zu lassen, aber schau Dir mal den Link an, damit kannst Du vielleicht was anfangen!
Hallo
Also, um die aktuelle Mausposition rauszufinden braucht man ne spezielle Funktion.
Da gibts enie, die geht nur beim Internet Explorer und eine, die geht beim Netscape...
Die weiß ich mom leider nicht auswendig, aber wird man schon finden können.. (irgendwas wie page.x und page.y) weiß aber nicht...
Aber für den Internet Explorer hab ich mal schnell was gemacht...
<span onMouseOver="zeigdietable()" onMouseOut="wegdietable()">Das hier ist der Text</span>
<div id="tabledingens" style="position:absolute; top:100px; left:100px; visibility:hidden;">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
Hahaaaa, es funzt!!!
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function zeigdietable() {
document.getElementById('tabledingens').style.left = window.event.x;
document.getElementById('tabledingens').style.top = window.event.y;
document.getElementById('tabledingens').style.visibility='visible';
}
function wegdietable() {
document.getElementById('tabledingens').style.visibility='hidden';
}
</script>
Aber für den Internet Explorer hab ich mal schnell was gemacht...
... was so nicht funktioniert.
<span onMouseOver="zeigdietable()" onMouseOut="wegdietable()">Das hier ist der Text</span>
mach hier mal vorne dran ein paar <br>'s bis du scrollen musst.
<script type="text/javascript">
function zeigdietable() {
document.getElementById('tabledingens').style.left = window.event.x;
document.getElementById('tabledingens').style.top = window.event.y;
document.getElementById('tabledingens').style.visibility='visible';
}
Dann 'funzt' das nicht mehr.
Da müßen einige Vereenkungen rein (wegem dem IE):
function mouse_pos(evt)
{
var pos = {left:0, top:0};
if(!evt) evt = window.event;
pos.left = evt.pageX ? evt.pageX : evt.clientX;
pos.top = evt.pageY ? evt.pageY : evt.clientY;
// Der IE 6 braucht Sonderbehandlung
if(document.compatMode && document.compatMode == "BackCompat")
{
// IE 6 im Quirks-(BackCompat) Modus
pos.left += document.body.scrollLeft;
pos.top += document.body.scrollTop;
}
else if (document.compatMode && document.compatMode == "CSS1Compat") {
// IE 6 im CSS1Compat Modus
pos.left += document.documentElement.scrollLeft;
pos.top += document.documentElement.scrollTop;
}else if (document.body)
{
// IE < 6 (nicht sicher da ich nur den IE 4 hab)
pos.left += document.body.scrollLeft;
pos.top += document.body.scrollTop;
}
return pos;
}
Struppi.