StyleAssistant-Homepage

15. Linktext/Linkgrafik der aktuellen Seitenposition hervorheben (16.10.1999)

Dieses Beispiel zeigt, wie sich eine Navigationsleiste – z. B. zur Anwendung innerhalb eines Framesets – so gestalten lässt, dass der Benutzer durch den Austausch von Farben die aktuelle Seitenposition besser erkennen kann. Dazu werden analog zum Beispiel 5c Klassen für die gewünschten Linkzustände definiert, die beim Berühren mit dem Mauszeiger (A:HOVER) bzw. beim Anklicken (OnClick) dynamisch verändert werden (siehe Beispiel 15a).

      CSS-Definitionen im Beispiel 15a:

      <STYLE TYPE="text/css">
      <!--

      A
      {
      Font-Family: Arial, Verdana, Helvetica;
      Font-Size: 100%;
      Text-Decoration: none;
      }

      .nachher
      {
      Color: White;
      Background-Color: Red;
      Font-Weight: bolder;
      }

      .vorher
      {
      Color: Red;
      Background-Color: #CAFFEE;
      }

      A.vorher:HOVER
      {
      Color: White;
      Background-Color: Blue;
      Font-Weight: bolder;
      }

      A.nachher:HOVER
      {
      Color: White;
      Background-Color: Blue;
      }

      -->
      </STYLE>


      JS-Funktion Klick() im Beispiel 15a:

      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

      <!--
      var Auswahl;
      var aktLink=1;

      function Klick(Nr)
      {
      if(document.getElementById)
      {
        Auswahl=document.getElementById("Link"+aktLink);
        Auswahl.className="vorher";
        Auswahl=document.getElementById("Link"+Nr);
        Auswahl.className="nachher";
        Auswahl.blur();
        aktLink=Nr;
      }

      if(document.all && !document.getElementById)
      {
        Auswahl=document.all["Link"+aktLink];
        Auswahl.className="vorher";
        Auswahl=document.all["Link"+Nr];
        Auswahl.className="nachher";
        Auswahl.blur();
        aktLink=Nr;
      }
      }

      //-->
      </SCRIPT>


      Link-Aufruf im BODY des Dokuments:

      <A HREF="javascript:alert('Link zur seite1.htm ...')" ID="Link1"
      CLASS="nachher" OnClick="Klick(1)">Infotext Seite 1</A>

      <A HREF="javascript:alert('Link zur seite3.htm ...')" ID="Link3"
      CLASS="vorher" OnClick="Klick(3)">Infotext Seite 3</A>

Dem Link zur Startseite (Seite 1) wird beim Laden die Klasse nachher zugewiesen, während die Links zu den Seiten 2...6 mit der Klasse vorher initialisiert werden.

(15a) So sieht's aus ...
Nach oben

In den Beispielen 15b und 15c wird dieses Prinzip mit grafischen Rollover-Effekten auf der Grundlage von Tipp 9 demonstriert. Diese Beispiele sind optisch identisch, unterscheiden sich jedoch in der Script-Implementierung. Im Beispiel 15c werden – statt der im Beispiel 15b eingesetzten expliziten Angabe der Bildnamen – drei Bild-Arrays verwendet, die in einer Schleife mit den Bildern ni.gif, ti.gif bzw. ci.gif belegt werden (n=Normal, t=Tausch, c=Click, i=Laufvariable von 1 bis Bildmax). Dadurch lassen sich leicht weitere Navigations-Grafiken hinzufügen.

      JS-Funktionen im Beispiel 15c:

      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

      <!--

       var BildNr, BildName, AktBildName, AltBildName;
       var i, AltBildNr, AktBildNr=1, Bildmax=5;

       if (document.images)
       {
         Bild_Normal=new Array(Bildmax)
         Bild_Tausch=new Array(Bildmax)
         Bild_Click=new Array(Bildmax)

         for (i=1;i<=Bildmax;i++)
         {
           Bild_Normal[i]=new Image();
           Bild_Normal[i].src="n"+i+".gif";

           Bild_Tausch[i]=new Image();
           Bild_Tausch[i].src="t"+i+".gif";

           Bild_Click[i]=new Image();
           Bild_Click[i].src="c"+i+".gif";
         }
       }

       function Over(BildNr)
       {
         if (document.images)
         {
           if (BildNr!=AktBildNr)
           {
             BildName="Bild" + BildNr;
             document.images[BildName].src = Bild_Tausch[BildNr].src;
           }
         }
       }

       function Out(BildNr)
       {
         if (document.images)
         {
           if (BildNr!=AktBildNr)
           {
             BildName="Bild" + BildNr;
             document.images[BildName].src = Bild_Normal[BildNr].src;
           }
           if (BildNr==AktBildNr)
           {
             BildName="Bild" + BildNr;
             document.images[BildName].src = Bild_Click[BildNr].src;
           }
         }
       }

       function Click(BildNr)
       {
         if (document.images)
         {
           AltBildNr=AktBildNr;
           AltBildName="Bild" + AltBildNr;
           AktBildNr=BildNr;
           AktBildName="Bild" + AktBildNr;
           document.images[AltBildName].src = Bild_Normal[AltBildNr].src;
           document.images[AktBildName].src = Bild_Click[AktBildNr].src;
         }
       }

      //-->
      </SCRIPT>


      Aufruf der JS-Funktionen:

      <A HREF="test3.htm" OnClick="Click(3)" OnMouseOver="Over(3)"
        OnMouseOut="Out(3)" OnFocus="blur()"><IMG SRC="n3.gif"
        WIDTH="100" HEIGHT="30" BORDER="0" NAME="Bild3" ALT="..."></A>

(15b) So sieht's aus ... (15c) So sieht's aus ...
Nach oben Zur Übersicht

Style

Assistant

Tipps & Tricks – Tipp 15 Zur Übersicht

Tipps & Tricks – Tipp 15
Zur Übersicht