Fortgeschrittene Hover-Effekte - Mit Hilfe von Javascript gibt es noch einige Möglichkeiten mehr, dynamische Effekte zu erzielen, wenn die Maus über eine Schaltfläche fährt. Dies muss sich zudem nicht nur auf <a>-Tags beschränken. Folgende Sachen sind daran beteiligt: <ul> <li>Eventhandler wie "onMouseOver" <li>Javascript-Attribute document.<das Element>.style <li>Stylesheets </ul> Was steckt dahinter?
- 1. Technik : onMouseOver - Event - Als erstes werden bei den Tabellenzellen, die sich ändern sollen, die Events, wenn die Maus drüber fährt und wenn sie wieder die Fläche verlässt, abgefangen. Dadurch wird dann eine Javascriptfunktion aufgerufen, welche die nächsten Schritte vollführt.
- 2. Technik : Stylesheets austauschen - Die aufgerufene Funktion tauscht dann die Stylesheets aus: die Vordergrundfarbe, das Cursorsymbol (und evtl. Hintergrundfarbe).
- 3. Technik : Text und Bilder austauschen - Außerdem werden mit Hilfe der Funktion noch der Text in der nebenstehenden Tabellenzelle und die Bildquellen ausgetauscht.
Der HTML - Quellcode <table width=330> <tr> <td onMouseOver="swap(this, true)" onMouseOut="swap(this, false)" id="1"> <a href="javascript:alert('Gut gedrückt!');">Ein Erster Link</a> </td> <td style="font-size: 11px;" id="1more">Mit einer kleinen Erklärung</td> </tr> <tr> <td onMouseOver="swap(this, true)" onMouseOut="swap(this, false)" id="2"> <a href="javascript:alert('Gut gedrückt!');">
Ein Zweiter Link</a> </td> <td id="2more" style="font-size: 11px;">...</td> </tr> <tr> <td colspan=2> </td> </tr> <tr> <td><img src="../images/stern.gif" name="stern1"> <img src="../images/stern.gif" name="stern2"></td> </tr> </table> Die Javascript - Funktion<script language="JavaScript" type="text/javascript"> var temp; function swap (tag, modus) { tag.style.backgroundColor = (modus? "#9999FF" : "#3535D7"); tag.style.cursor = (modus? "crosshair" : "auto"); document.images["stern"+tag.id].src = (modus? "1.gif" : "2.gif"); if (document.getElementById) { var hilfsText = document.getElementById(tag.id+"more"); } else if (document.all) { var hilfsText = eval("document.all."+id+"more); } temp = (modus ? hilfsText.innerHTML : temp); hilfsText.innerHTML = (modus? "So drücken Sie doch...!" : temp); }</script> Der Ablauf
- 1. Die Maus kommt über die Tabellenzelle und löst das Event aus
- 2. Das Event ruft die Javascriptfunktion "swap(this,modus)" auf
- 3. this enthält das Objekt <td>, modus die Info (true), dass die Maus gerade darüber ist
- 4. Die Hintergrundfarbe wird ausgetauscht: tag.style.backgroundColor = "#9999FF"
- 5. Das Cursorsymbol wird ausgetauscht: tag.style.cursor = "crosshair"
- 6. Die nebenstehende Tabellenzelle wird gesucht: var hilfsText = document.getElementById(tag.id+"more").innerHTML
- 7. Der Text dieser wird vertauscht: hilfsText = "So drücken Sie doch...!"
Um Code zu sparen, wird der " Bedingung? Anwsg.1 : Anwsg.2 " - Operator benutzt. Da "modus" die Information gibt, ob sich die Maus inner- oder außerhalb der Tabellenzelle befindet, wird für den Fall true (wahr) Anweisung 1 benutzt, für false (falsch) Anweisung 2. Das ist sehr effizient und spart Platz. Durch die Methode getElementById(...) kann recht einfach auf die Tabellenzelle rechts nebenan zugegriffen werden, da die als id die gleiche wie die linke + "more" hat.k4eeqqwe42