Mausposition

[Tobsen]

Hallo,
wie kann ich herausfinden, ob sich die Maus gerade über einem bestimmten div-Bereich befindet, bzw ob sie den verlassen hat. Das Problem ist nämlich folgendes: Ich habe eine Tabelle. Fährt man mit der Maus über eine Zelle, so wird die Eigenschaft, eines darunterbefindlichen <div>-Bereiches auf visible gesetzt. Wenn der User die Zelle mit der Maus verlässt, soll die Eigenschaft wieder auf hidden gesetzt werden. Hier tut sich mir aber nun folgendes Problem auf. Wenn der User den Bereich nur verlassen hat um auf dem <div>-Bereich etwas auszuwählen, kann er dies nicht tun, da dieser ja ,nachdem der User mit der Maus von der Zelle runter ist, verschwunden (hidden) ist. Könnt ihr mir ein Tipp geben, wie ich das machen kann? Falls ihr nicht verstanden habt, was ich hier geschrieben habe, fragt einfach nochmal nach. Ich danke euch vielmals!
MfG
Tobsen

 

[THE REAL TOOLKIT]

Das geht mit Javascript schon,aber da jeder Browser auch ne andere Auflösung etc. etc. hat wirds schwer.

 

[Tobsen]

Was schlägst du denn vor. Wie könnte ich das denn mit Java-Script realisieren?
Ich danke dir!
MfG

Tobsen

 

[Fabian H]

Das ist recht kompliziert.
Mal mein vorschlag:
entweder mit den event.x und event.y Variablen Mausposition bestimmen, dann muss aber der Div und die Tabelle mit css absolut positioniert sein, oder du machst statt dem div eine Zelle von der Tabelle wo du auch der Menüpunkt (oder was auch immer) drin is.
Dann fragst du mit JavaScript per mousemove, mouseover und mouseout handlern ab über welcher Zelle sich die Maus gerade befindet.
Is zwar ein bisschen kompliziert und warscheinlich lassen sich Bugs auch kaum verhindern aber es wäre schon mal ein Ansatz.
Musst mal a weng surfen, es gibt einige Homepages die änlich Funktioniern.

Ich hoffe des hilft dir was. Wenn ich mal gut draufbin versuch ichs vielleicht mal

]Ton[

 

[Fabian H]

Ok hab ne Site gefunden (siehe diese Board )
http://www2.eplus-imode.de/1/de/html/pub/marketing/start_fs.html

]Ton[

 

[Tobsen]

Hmmmm... danke erstmal für deine Hilfe.
Habe jetzt folgende Funktion gebastelt, aber irgendwie funzt des noch net so, wie ich das gerne hätte.

function showmenu(id1, idwidth, idheight )
{
if(event.x > id1width || event.y > idheight)
{
document.getElementById(id1).style.visibility='hidden';
}
}

Könnt ihr mir vielleich weiterhelfen....

 

[Peter Bönnen]

Auch wenn ich sonst JavaScript nicht so doll leiden kann, scheint die genLIB 2.0 von http://www.microbians.com recht gut für sowas geeignet zu sein. Bin ich letztens drüber gestolpert:

http://www.redk.net/microbians/genlib/download/genlib_20.zip

/* Ach ja: die darf nicht kommerziell verwendet werden, falls das angedacht war */

so long, Fluke

 

[Tobsen]

Also hier mal ein paar Codeschnipsel:

//.......head-bereich
function hidemenu(id1, idwidth, idbottom)
{
if(window.event.x > id1width || window.event.y > idbottom)
{
document.getElementById(id1).style.visibility='hidden';
}
}
//..........


//............body-bereich

<div id="home__" style="position:absolute; top:27px; left:0px; width:16.66%; background-color:#0099FF;
visibility:hidden; border-width:2px; border-color: #0033FF; border-style:solid; z-index:1; height:70px;"
onMouseMove="hidemenu('home', 16.66%, 70px);">


Ich weiß net weiter

 

[Adam Wille]

Warum versuchst du auch ein Element mit der ID "home" zu referenzieren, wenn deine <div>-Sektion doch die ID "home__" verpasst bekommt?

Des weiteren sieht das ganze bisher recht sinnfrei aus, da dein <div>-Bereich auf "hidden" gestellt ist und nach entsprechendem mousemove weiterhin "hidden" verpasst bekommt, da kann ja nix ersichtlich werden, oder?

Geist