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ß…
