 |
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ürlichfließend sind. Im Internet, in Zeitschriften und Bücherngibt es eine Vielzahl von Vorschlägen dazu, allerdingsauch das kleine süße Problem, daß vieledavon nur in einem Großbrowser funktionieren. Ichkann nicht verstehen, wozu das gut sein soll.
Schrift-Link, Veränderung-der Schrift unter derMaus Diese Sorte der Hervorhebung von Links sieht man selten,in den meisten Büchern und Kursen fehlen Vorschlägedazu. Der Grund: Es gibt keine einfache Möglichkeit,dies in beiden Großbrowsern zu realisieren. Ein weitererNachteil: Die Manipulation der Links stört zunächstdie eingebaute Farbverwaltung der Browser, die z. B. besuchteLinks farblich unterscheidet. Mit einiger Mühe könnteman das vielleicht auch noch in den Griff kriegen.
Nun ist es kein großes Problem, in Abhängigkeitvom Browser den Code zu differenzieren. Es folgt ein kurzgehaltener Vorschlag. Er bedient zufällig fast alleBrowser der Welt gleich gut. Wenn es ein Netscape-Browser<5ist, kennt er layer und tut es mit ihnen, wenn es ein modernerIExplorer oder auch Netscape6 ist, belebt er die Links wegender Styles, alle anderen zeigen stinknormale Links. Diehier 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> |
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!
 |
 |
|
|
|
DIENSTE
