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> <!-- function lay(an,aus) { window.document.layers[aus].visibility='hide'; window.document.layers[an].visibility='show'; } --> </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> |
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> |
![]() |
![]() |
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> |
![]() |
![]() |
<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. |
![]() |
![]() |