Dreidimensionale Navigation
Mit folgendem Skript kannst Du erreichen, daß ein einmal geklickter Menüpunkt – speziell bei auf frames basierenden Seiten – hervorgehoben bleibt, bis ein anderer angeklickt wird. Es wird beim Besucher aktiviertes JavaScript vorausgesetzt. Bei deaktiviertem JavaScript funktionieren die Verweise dennoch ganz normal, nur die visuellen Effekte fehlen. Hier das Beispiel zum Testen:
Bitte den Code nicht aus dem Seitenquelltext kopieren, sondern von unten übernehmen. Damit beim Klicken auf das Beispiel keine Verweise ausgeführt werden, habe ich den Seitenquelltext nämlich verändert!
Erklärung
Mit dem array a_over werden
die Bilder festgelegt, die beim mouseover event
zu laden sind, dasselbe gilt für die arrays
a_click und a_out.
Durch onmouseover="mOver(1)"; wird
die Funktion mOver aufgerufen, die abfragt,
welche Grafik gerade angewählt ist, und diese anschließend
gegen das nächste, im array definierte
Bild austauscht.
Sinngemäß geschieht dasselbe bei der Funktion mOut.
Lediglich bei der Funktion mClick werden zwei Werte
abgefragt: Die derzeit nicht selektierten Grafiken, die beim
onclick event auf irgen deinen Button
gegen das a_out-Bild ausgetauscht werden, und der
selektierte Button, bei dem durch das onclick-Ereignis
die Grafik gegen die selektierte ausgetauscht wird. Durch dieses
Skript ist es möglich, sehr schöne dreidimensionale Navigationen
zu bauen, die sogar den Status der einzelnen Menüpunkte wiedergeben.
Nachteil: Es werden pro Link mindestens drei Grafiken benötigt, das
sind bei einer Navigation mit 10 Verweisen schon 30 Bilder.
Der Skript-Code
Das folgende Skript kannst Du
intern
im head oder
extern
einbinden.
selected=0;
a_over = new Array;
a_over[1] = new Image;a_over[1].src = "button1-neg.gif";
a_over[2] = new Image;a_over[2].src = "button2-neg.gif";
a_over[3] = new Image;a_over[3].src = "button3-neg.gif";
a_click = new Array;
a_click[1] = new Image;a_click[1].src = "button1-3.gif";
a_click[2] = new Image;a_click[2].src = "button2-3.gif";
a_click[3] = new Image;a_click[3].src = "button3-3.gif";
a_out = new Array;
a_out[1] = new Image;a_out[1].src = "button1-pos.gif";
a_out[2] = new Image;a_out[2].src = "button2-pos.gif";
a_out[3] = new Image;a_out[3].src = "button3-pos.gif";
function mOver(nr) {
if(nr!=selected) {
imgname="button"+nr;
document.images[imgname].src=a_over[nr].src;
}
}
function mOut(nr) {
if(nr!=selected) {
imgname="button"+nr;
document.images[imgname].src=a_out[nr].src;
}
}
function mClick(nr) {
if(selected!=0) {
imgname="button"+selected;
document.images[imgname].src=a_out[selected].src;
}
selected=nr;
imgname="button"+nr;
document.images[imgname].src=a_click[nr].src;
}
Der Code für die Verweise, die das Skript aufrufen
<a href="#"
onmouseover="mOver(1);"
onmouseout="mOut(1);"
onclick="mClick(1);"><img name="button1"
src="button1-pos.gif"
style="border:0; width:80px; height:20px;"
alt="1" /></a>
<a href="#"
onmouseover="mOver(2);"
onmouseout="mOut(2);"
onclick="mClick(2);"><img name="button2"
src="button2-pos.gif"
style="border:0; width:80px; height:20px;"
alt="2" /></a>
<a href="#"
onmouseover="mOver(3);"
onmouseout="mOut(3);"
onclick="mClick(3);"><img name="button3"
src="button3-pos.gif"
style="border:0; width:80px; height:20px;"
alt="3" /></a>
Dieses Skript ist auch in framesets einsetzbar, die über mehr als einen Navigationsframe verfügen. Eine Demonstration samt Beschreibung wird es hier vielleicht mal geben...
PS: Das Skript stammt in seiner ursprünglichen Version von MADU und wurde von Kurt überarbeitet und ausgebaut. Erfreulicherweise funktioniert es nun auch in Netscape 4.
Viel Spaß!