Maus-Sensitive Links

Linklisten, am liebsten, wie der Browser will, dunkelblau und unterstrichen, sehen auf Dauer nicht sehr anziehend aus. Für die Navigation innerhalb von Sites haben sich mehr oder weniger aufwendige Menüs durchgesetzt. Dabei muß man, wenn es um sehr viele Einträge geht, auf Pulldown-Menüs zurückgreifen, die an anderer Stelle besprochen werden. Hier soll es um die "Belebung" normaler Menüs gehen, wobei die Grenzen zwischen Menü-Arten natürlich fließend sind. Im Internet, in Zeitschriften und Büchern gibt es eine Vielzahl von Vorschlägen dazu, allerdings auch das kleine süße Problem, daß viele davon nur in einem Großbrowser funktionieren. Ich kann nicht verstehen, wozu das gut sein soll.

Schrift-Link, Veränderung-der Schrift unter der Maus

Diese Sorte der Hervorhebung von Links sieht man selten, in den meisten Büchern und Kursen fehlen Vorschläge dazu. Der Grund: Es gibt keine einfache Möglichkeit, dies in beiden Großbrowsern zu realisieren. Ein weiterer Nachteil: Die Manipulation der Links stört zunächst die eingebaute Farbverwaltung der Browser, die z. B. besuchte Links farblich unterscheidet. Mit einiger Mühe könnte man das vielleicht auch noch in den Griff kriegen.
Nun ist es kein großes Problem, in Abhängigkeit vom Browser den Code zu differenzieren. Es folgt ein kurz gehaltener Vorschlag. Er bedient zufällig fast alle Browser der Welt gleich gut. Wenn es ein Netscape-Browser<5 ist, kennt er layer und tut es mit ihnen, wenn es ein moderner IExplorer oder auch Netscape6 ist, belebt er die Links wegen der Styles, alle anderen zeigen stinknormale Links. Die hier genutzte Möglichkeit mit styles zu arbeiten, habe ich zwar in Funktion, nirgends aber dokumentiert gefunden. Sie ist aus den genannten Gründen besonders geeignet. Wie Experimente ergaben, akzeptiert sie aber nicht alle Schriftattribute.

Im <head> eine Vorbereitung für IExplorer:
<style type="text/css">
   a:hover{text-transform:uppercase;}
</style>
und eine für Netscape:
<script language=JavaScript>
   
</style>
Am Ort der geplanten Links geht es richtig zur Sache:
<script language=JavaScript>
   if(document.layers)
   {
       document.write("<layer name=\"layer1\">");
       document.write("<a href=\"erst.htm\"");
       document.write(" onMouseOver=\"lay(\'layer2\',\'layer1\')\"");
       document.write(" onMouseOut=\"lay(\'layer1\',\'layer2\')\">");
       document.write("Erster Link</layer>");
       document.write("<layer name=\"layer2\" visibility=\"hide\">");
       document.write("<a href=\"erst.htm\">");
       document.write("ERSTER LINK</a></layer>");
   }
   else
      document.write("<a href=\"home.htm\">Erster Link</a>");
</script>

Bild verändert sich unter der Maus, einfachste Variante

Weit verbreitet sind Links, deren Aussehen sich unter der Maus verändert, dabei kann es sich um reine Schrift handeln oder um Bilder. Am einfachsten zu realisieren sind veränderliche Bilder, die Veränderung direkter Schriftlinks erfordert sehr viel höheren Aufwand.
Genutzt werden die Events onMouseOver und onMouseOut, die ja zwischen HTML und JavaScript eine Mittlerrolle spielen. Speziell für Links funktionieren sie in beiden Groß-Browsern. Wichtig ist die erst im img-Tag erfolgende Namensvergabe für das Bild. Glücklicherweise wird die sich ändernde Zuordnung der Bilddateien zum Bild "kunststoff" sofort berücksichtigt. Genau das gelingt bei Schriftattributen so nicht.

<a href="jdummy1.htm"
   onMouseOver="document.kunststoff.src='bilder/kunst2.gif'"
   onMouseOut="document.kunststoff.src='bilder/kunst.gif'">
<img SRC="bilder/kunst.gif"
   NAME="kunststoff"
   ALT="Nur zum Testen, Linkziel nicht vorhanden!"
   BORDER=0 height=25 width=100>
</a>

Bild verändert sich unter der Maus, Ladezeitprobleme bekämpfen

Die Bilddateien für die Buttons sollten nicht allzu groß sein. Im hier verwendeten Beispiel sind aus Ersparnisgründen sogar drei verschiedene Dateien beteiligt worden. Die wechselnden Schriften sind als .gif's gespeichert, die deshalb sehr klein können, weil sie nur schwarze bzw. weiße Pixel enthalten. Der Hintergrund mit dem Farbverlauf ist dagegen als .jpg gespeichert und bleibt stets liegen.
Bei der erstmaligen Benutzung der Bild-Links muß die zweite Bilddatei eigens geladen werden, was zu unerwünschten Verzögerungen führen kann. Deshalb wird empfohlen, die Bilder allesamt vorab zu laden. Diese Verbesserung soll hier vorgestellt werden. Dazu wird im <head>-Teil ein Bildarray angelegt, welches alle erforderlichen Button-Bilder zur Seite im Speicher vorhält, um auf sie ohne Verzögerung zugreifen zu können.
Für den folgenden Code lege ich 10 animierte Buttons zugrunde, listig, wie wir nun mal sind, nennen wir die Bilddateien etwa a1.gif und b1.gif, (Preisfrage: Wie geht es weiter?) und die Bildernamen werden im Interesse kurzen Codes zu "B1","B2" etc. Mein Beispiel ist, sorry, allerdings auf zwei verkürzt.

Im <head> müssen die Laderoutinen untergebracht werden:
<script language=JavaScript>
   var button =10;
   bild=new Array();
   for(i=0;i<2*button;i+=2){
      bild[i] = new Image(); bild[i].src = "a"+(i/2+1)+".gif";
      bild[i+1] = new Image(); bild[i+1].src = "b"+(i/2+1)+".gif";}
   function wex(nam,einaus)
   {
    document.images[nam].src=bild[2*(name.replace("B","")-1)+einaus].src
   }
</script>
Die Link-Einträge werden nur wenig verändert:
<a href="jdummy3.htm"
   onMouseOver="wex('B1',1)"
   onMouseOut="wex('B1',0)">
<img SRC="a1.gif"
   NAME="B1"
   ALT="Nur zum Testen!"
   BORDER=0 height=25 width=100>
</a>

Komplette Variante, mit mehr Aufwand

Wieso einfach, wenn es auch umständlich geht?
Das oben beschriebene Beispiel wird oft genutzt, moderne Webeditoren bieten solche Scripte auf Knopfdruck, was Vor- und Nachteile hat. Hier sei als Beispiel eine "auf Nummer Sicher" programmierte Variante, wie sie der sehr empfehlenswerte Webeditor "1st Page 2000" anbietet, im Einzelnen kommentiert. Die Analyse fremder Scripte bietet ja Anregung für eigene Weiterentwicklungen.

`<script language="JavaScript" type="text/javascript">` `<!-- Hide from older browsers`	Das Script ist, wie üblich, im <head> unterzubringen. Kommentar
`function SwitchImg()` `{ //start` `var rem,keep=0,store,obj,` `switcher=new Array,` `history=document.Data;` `for(rem=0;rem<(SwitchImg.arguments.length-2);rem+=3)` `{` `store=SwitchImg.arguments[(navigator.appName` `=='Netscape')?rem:rem+1];` `if((store.indexOf('document.layers[')==0` `&&document.layers==null)\|\|` `(store.indexOf('document.all[')==0` `&&document.all==null))` `store='document'+` `store.substring(store.lastIndexOf('.'),` `store.length);` `obj=eval(store);` `if(obj!=null)` `{` `switcher[keep++]=obj;` `switcher[keep++]=(history==null\|\|` `history[keep-1]!=obj)?obj.src:history[keep];` `obj.src=SwitchImg.arguments[rem+2];` `}` `}` `document.Data=switcher;` `}//end`	Die Funktion soll den Austausch von (ggf. auch mehreren) Bilddateien regeln, unabhängig davon, welcher Browser benutzt wird. Es läuft alles darauf hinaus, dem in der Variablen `obj` gespeicherten Bildnamen die neue Dateikennung zuzuweisen. Für die Wiederherstellung wird der Name der entfernten Datei in dem Array `Data` gespeichert, das eine Eigenschaft des Objektes `document` darstellt. Diese habe ich nirgends dokumentiert gefunden.
`function RestoreImg()` `{//start` `if(document.Data!=null)` `for(var rem=0;` `rem<(document.Data.length-1);rem+=2)` `document.Data[rem].src=document.Data[rem+1];` `}//end`	Hier werden alle `Data`-Einträge so restauriert, daß immer zweimal nacheinander im Array der Dateiname des "unberührten" Buttons steht.
`//end hiding contents -->` `</script>`	Kommentar und Ende des Scripts
`<a href="kunst.html"` `onMouseOut="RestoreImg()"` `onMouseOver="SwitchImg('document.koff',` `'document.koff','kunst2.gif')">` `<img SRC="kunst.gif"` `NAME="koff"` `ALT="Nur zum Testen, Linkziel nicht vorhanden!"` `BORDER=0 height=25 width=100>` `</a>`	Der Eintrag am Ort des Links, hier auf der Seite in eine Tabelle eingebaut. Statt des direkten Bilderwechsels erfolgen hier in Abhängigkeit von den Mausereignissen Funktionsaufrufe. Bis auf diesen Unterschied ähnelt der Aufruf dem oben gezeigten.

Unglaublich, es funktioniert immer noch!