Benutzerdefinierte Statuszeile
Manchmal wäre es vorteilhaft, wenn man eine Erklärung zu einem Link anzeigen könnte. Aus Gründen des Designs kann man jedoch nicht immer zu jedem Link noch eine umfangreiche Erklärung
schreiben. Hier kann man entweder ein Popup-Fenster einsetzen oder wie nachfolgend beschrieben den Text in der Statuszeile anzeigen lassen.
Statusanzeige ändern
Normalerweise steht in der Statuszeile des Browsers nichts. Wenn der Surfer dann mit der Maus über einen Link fährt, wird die dazu gehörende URL angezeigt.
Nun lässt sich diese Anzeige
in der Statuszeile ändern, so dass zum Beispiel ein spezieller Hinweis oder gar eine ganz andere URL erscheint.
|
<script language="javascript"><!--
window.defaultStatus = "Dies ist ein spezieller Hinweis";
//--></script>
|
Der Wert von defaultStatus bleibt in der Statuszeile stehen, bis er von einem anderen Ereignis überschrieben wird - etwa wenn der Besucher mit der Maus einen Link berührt.
Noch einfacher ist es, weitere Informationen zu einem Link in die Statusbar zu schreiben. Dafür
braucht es noch nicht einmal ein eigentliches Script, sondern nur eine kleine Erweiterung des Link-Tags:
|
<a href="seite.htm" onmouseover="self.status='Das ist der Statustext.';return true" onmouse out="self.status='';return true">
|
Fährt nun der Surfer mit der Maus über diesen Link, wird der vordefinierte Text in der Statuszeile
angezeigt. Verlässt er die Verknüpfung, ist die Statuszeile wieder leer oder zeigt den oben vorgestellten Standardwert an.
Erklärungen für Imagemaps
Bei standardmässigen Links kann der Surfer in den meisten Fällen auch ohne Erklärung auskommen. Anders sieht es manchmal bei Imagemaps aus. Diese sind nicht selten alles andere
als selbsterklärend, um so wichtiger ist es, dem Anwender wenigstens in der Statuszeile eine kleine Hilfestellung zu bieten:
|
<map name="image-map">
<area shape="rect" coords="10,10,50,50" href="seite.htm"
onmouseover="self.status='Das ist der Statustext.';return true" onmouseout="self.status='';return true">
</map>
<img src="image.gif" border=0 width=200 height=100 usemap="#image-map">
|
Der Code funktioniert ganz ähnlich wie beim letzten Beispiel, mit dem Unterschied, dass die Eventhandler nun in eine Map integriert sind.
|
