nicht angemeldet
infofenster mit mauskoordinaten postionieren
hi
hab folgendes problem.
ich möchte für texte und grafiken ein css element postionieren, was nur aktiv wird, wenn das betreffende element mit der maus überfahren wird.
das element soll dann bei dem mauszeiger erscheinen und solange dort bleiben, bis die maus von diesem element wieder weg bewegt wird.
unter IE funktioniert es auch, nur unter firebird bekomm ich es absolut nicht zum laufen. ich weiss nicht, wie ich bei firebird die bildschirmkoordinaten der maus in mein script bekomme.
DIE HTML
<html><head><title>Untitled</title></head>
<script type="text/javascript">
function nfo(txt,std)
{
with(document.getElementById("info"))
{
firstChild.data = txt;
style.display = std;
if(navigator.appName=="Microsoft Internet Explorer")
{
style.top = window.event.clientY;
style.left = window.event.clientX;
}
else
{
style.top = window.event.screenY;
style.left = window.event.screenX;
}
}
}
</script>
<style type="text/css">
body{z-index:1;}
#info{position:absolute;
top:10px;
left:10px;
z-index:2;
display:none;
background-color:#ffffcc;
border-style:solid;
border-width:1px;
border-color:#c0c0c0;}
</style>
<body>
<div id="info"> </div>
<br><br><br><br>
bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla Dies ist ein
<font onMouseOver="nfo('Dies ist das dynamische Infofenster, was unter IE funktioniert','block')" OnMouseOut="nfo(' ','none')">Text</font>
, der getippt worden ist, um einen Text anzuzeigen. bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla
<br>Mit der Maus aufs erste Text fahren!
</body>
</html>
-
hi,
sollte eigentlich funktionieren, wenn du beim funktionsaufruf im mouseover das event als parameter übergibst und das dann in der funktion ausliest:<html><head><title>Untitled</title></head>
<script type="text/javascript">
function nfo(txt,std,e)
{
with(document.getElementById("info"))
{
firstChild.data = txt;
style.display = std;
style.top = e.clientY;
style.left = e.clientX;}
}
</script>
<style type="text/css">
body{z-index:1;}
#info{position:absolute;
top:10px;
left:10px;
z-index:2;
display:none;
background-color:#ffffcc;
border-style:solid;
border-width:1px;
border-color:#c0c0c0;}
</style>
<body>
<div id="info"> </div>
<br><br><br><br>
bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla Dies ist ein
<font onMouseOver="nfo('Dies ist das dynamische Infofenster, was unter IE funktioniert','block',event)" OnMouseOut="nfo(' ','none',event)">Text</font>
, der getippt worden ist, um einen Text anzuzeigen. bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla
<br>Mit der Maus aufs erste Text fahren!
</body>
</html>ACHTUNG:
das stimmt dann nicht mehr, wenn der anwender gescrollt hat.
also bei style.top und style.left noch das gescrollte dazuzählen:
is bei NS: window.pageXOffset und window.pageYOffset,
beim IE: document.body.scrollLeft und document.body.scrollTopgruß
ptr-
also bei style.top und style.left noch das gescrollte dazuzählen:
is bei NS: window.pageXOffset und window.pageYOffset,
beim IE: document.body.scrollLeft und document.body.scrollTopalso dann:
e.clientY (bzw. X) + document.body.scrollLeft (bzw. Top)
" " + window.pageXOffset (bzw. YOffset)
-
-
Hallo,
ich möchte für texte und grafiken ein css element postionieren, was nur aktiv wird, wenn das betreffende element mit der maus überfahren wird.
das element soll dann bei dem mauszeiger erscheinen und solange dort bleiben, bis die maus von diesem element wieder weg bewegt wird.
unter IE funktioniert es auch, nur unter firebird bekomm ich es absolut nicht zum laufen. ich weiss nicht, wie ich bei firebird die bildschirmkoordinaten der maus in mein script bekomme.Über die Eigenschaften pageX/pageY des Event-Objekts, welches im Mozilla nicht über window.event zu erreichen ist, sondern der Funktion als Parameter übergeben wird.
Ein Beispiel:
function mousemove (e) {
posx=0; posy=0;
if (!e) e=window.event;
if (e.pageX && e.pageY) {
posx=e.pageX;
posy=e.pageY;
} else
if (e.clientX && e.clientY) {
if (document.compatMode && document.compatMode=="CSS1Compat") {
posx=e.clientX + document.documentElement.scrollLeft;
posy=e.clientY + document.documentElement.scrollTop;
} else {
posx=e.clientX + document.body.scrollLeft;
posy=e.clientY + document.body.scrollTop;
}
}
window.status='posx: ' + posx + ' posy: ' + posy;
}
document.onmousemove=mousemove;Die document.compatMode-Abfrage mit document.compatMode unterscheidet MSIE 5.x und MSIE 6 im Quirks-Rendermodus und MSIE 6 im standardkonformen Rendermodus.
Voraussetzung richtiger Koordinaten ist, dass html {border-style:none;} gesetzt ist, sonst zeigt MSIE einen Rahmen um das Dokument an, wodurch die Werte jeweils um 2px abweichen.
Im Opera 6 funktioniert diese Methode nicht, weil der unter clientX/Y das versteht, was Mozilla und Opera 7 unter pageX/Y verstehen und das Addieren des scrollLeft dort unnötig ist.style.top = window.event.screenY;
style.left = window.event.screenX;screenX/screenY ist dafür reichlich unbrauchbar, da es die obere linke Ecke des Browserfensters als Nullpunkt verwendet.
Ich verstehe ehrlich gesagt nicht, wozu dieser Aufwand nötig ist. Du willst ein Element sichtbar machen und relativ positionieren, wenn ein Element mit der Maus überfahren wird. Dazu sind die Mauskoordinaten nicht unbedingt wichtig, sondern eher die Koordinaten des Elements, das überfahren wird. Und diese Koordinaten lassen sich recht zuverlässig über offsetLeft und offsetTop auslesen (in gewissen Fällen ist es komplizierter, siehe http://www.quirksmode.org/js/findpos.html). Dementsprechend ließe sich dann das Element mit dem Text mit einer bestimmten Verschiebung positionieren. Solange es sich um kleinere Textflächen handelt, sollte das keinen großen Unterschied machen, obwohl es natürlich viele Besonderheiten zu beachten gäbe. Die werden weitesgehend durch spezielle Tooltip-/Popup-Bibliotheken wie http://www.bosrup.com/web/overlib/ abgedeckt, aber wirklich zuverlässig arbeiten die auch nicht.
Mathias