Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 17
Zur Übersicht

17. Simulation von Links (13.11.1999)

Falls Sie in Ihren Seiten die Funktionalität von Hyperlinks benötigen, die einen Text, eine Grafik oder einen DIV- bzw. SPAN-Block umfassen, aber keine <A>...</A>-Definitionen verwendet werden sollen, bietet der nachfolgende Code – zumindest im Internet Explorer – eine Alternative.
Im Beispiel 17 werden mittels CSS zwei Klassen für die optische Aufbereitung der in SPAN-Tags eingefügten Texte realisiert. Die JavaScript-Funktionen schalten zwischen diesen Klassen um (OnMouseOver/OnMouseOut), wobei sich u.a. die Form des Mauscursors (siehe Beispiel 11) ändert. Schliesslich werden über OnClick-Events die Links ausgelöst. 
      <STYLE TYPE="text/css">
      <!--

      .cursoron
      {
      Color: Red;
      Cursor: hand;
      Text-Decoration: none;
      }

      .cursoroff
      {
      Color: Blue;
      Cursor: arrow;
      Text-Decoration: underline;
      }

      -->
      </STYLE>


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

      var Auswahl;

      function CurOn(Nr)
      {
      Auswahl=eval('SimLink'+Nr);
      Auswahl.className="cursoron";
      window.status='Klick mich!';return true;
      }

      function CurOff(Nr)
      {
      Auswahl=eval('SimLink'+Nr);
      Auswahl.className="cursoroff";
      window.status='';return true;
      }

      function Meldung(Nr)
      {
      alert("Der simulierte Link "+Nr+" wurde angeklickt\n
      Im OnClick-Ereignis kann die gewuenschte\n
      Routine aufgerufen werden.");
      }

      //-->
      </SCRIPT>


      Aufruf der Funktionen in den SPAN-Tags im Beispiel 17:

      <SPAN ID="SimLink1" CLASS="cursoroff" OnMouseOver="CurOn(1)"
      OnMouseOut="CurOff(1)" OnClick="Meldung(1)">Testlink 1</SPAN>

Anmerkung: Die Idee zu diesem Tipp stammt aus einer Anfrage in der Newsgroup de.comp.lang.javascript, die ich dort am 11.11.99 – mit einem im wesentlichen Beispiel 17 entsprechenden Posting – beantwortet habe.