HowTo: Javascript Mouse Over – Mousepositionen für Details
Der Effekt ist eigentlich wohl bekannt und wir bei vielen Javascript Bibliotheken angeboten: Mouse Over Effekte. So werden z.B. Details oder weitere Informationen nachgeladen, sobald man mit dem Mousecursor über dem Element ist.
Doch bei einer solch einfachen Funktion ist ein komplettes Javascript Framework wie mit Kanonen auf Spatzen zu schießen, daher nun ein kleines HowTo wie man das selber in 5 Minuten implementieren kann:
Schritt 1: Grundgerüst erstellen
<body> Â <h1>Javascript Mouse Over</h1> Â <div id="MouseOver" style="display: none;"></div> <p onmousemove="showMouseOver('Mouse Over Text... Test...', event)" onmouseout="hideMouseOver()">[Mouse Over]</p> Â <p>...</p> </body>
In unserem Body Element ist ein Div namens “MouseOver” definiert, in welchen später unsere Mouseover Text drin ist. Danach folgt etwas Beispieltext, in welchen ich bestimmte Wörter über Javascript mit unserem kleinen Javascript verknüpft hab (onmousemove = anzeigen des Textes, onmouseout = verstecken des MouseOver Divs).
Schritt 2: Style hinzufügen
Als Style haben wir nur unser MouseOver etwas gestaltet:
<style type="text/css">
 #MouseOver
 {
 border: solid 1px black;
 position: absolute;
 background-color: #FFF;
 }
 </style>
Dabei ist eigentlich nur das “position: absolute” wichtig.
Schritt 3: Javascript hinzufügen
Jedes Tag kann über “showMouseOver” einen Text übergeben und das Schlüsselwort event um auf die Mausposition zuzugreifen (dies hatte ich bei diesem HowTo nicht berücksichtig – dort wird der Eventhandler programmatisch zugeordnet, was aber nicht notwenig ist). Bei onmouseout muss dieser Detailtext wieder ausgeblendet werden – über “hideMouseOver”.
- Javascript Funktionen:
- onmousemove=showMouseOver(“text”, event)
- onmouseout=hideMouseOver()
Javascript Code:
function showMouseOver(text, event) Â { Â document.getElementById('MouseOver').innerHTML = text; Â var topPixel = event.clientY + 10; Â var leftPixel = event.clientX + 10; Â document.getElementById('MouseOver').style.top = topPixel + "px"; Â document.getElementById('MouseOver').style.left = leftPixel + "px"; Â document.getElementById('MouseOver').style.display = "block"; Â }
function hideMouseOver()
 {
 document.getElementById('MouseOver').innerHTML = "";
 document.getElementById('MouseOver').style.top = "0px";
 document.getElementById('MouseOver').style.left = "0px";
 document.getElementById('MouseOver').style.display = "none";
 }
Über das Schlüsselwort “event” kann auf die Mauspositionsdaten zugegriffen werden – über clientX und clientY wird dann unser MouseOver Div positioniert und über innerHTML mit dem jeweiligen Text befüllt. Dabei werden bei der Positionierung nochmal 10 Pixel zugerechnet, da es a) designtechnisch besser ist und b) sonst die “mouseout” Funktion aufgerufen wird.
Bei hideMouseOver wird das MouseOver Div “geleert” und wieder versteckt.
Diese Technik funktioniert im IE7 und Firefox2 ohne Probleme – andere Browser müssten auch keine Probleme bringen. Hoff ich 
Viel Spaß…
[ Download Source Code & Demoanwendung ]
About the author
Written by Robert Mühsig
Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.
Kantholz
15. February 2008
WoW, krasse Sache, besten Dank, danach hab ich schon ewig gesucht und das ganze dann noch so simpel, ohne 10MB Framework
thx!
Greetz, Kantholz
Mathias
9. November 2009
Super Sache! Vielen Dank!