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 12
Zur Übersicht

12. Text-HOVER auf anderen Text beziehen (28.07.1999)

Durch die Verwendung der CSS-Definition A:HOVER können Links bekanntlich bei einer Mausberührung ihr Aussehen ändern. Wie kann man nun aber beim Berühren eines Links einen ganz anderen Text zur Farbänderung bewegen? Beispiel 12a verwendet dazu eine Tabelle mit 4 Spalten ohne Rahmen, die einen Link ("Erstens") sowie drei Texteinträge enthält. Spalte 4 der Tabelle wurde die ID="Spalte4" zugewiesen. Der in der ersten Spalte befindliche Link wurde mit den Ereignissen OnMouseOver bzw. OnMouseOut ausgestattet, die über das definierte JavaScript in Verbindung mit CSS-Anweisungen die Eigenschaften des Textes in Spalte 4 verändern. 

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

        A
        {
        Color: Blue;
        Text-Decoration: none;
        }

        .over
        {
        Color: Red;
        }

        .out, TD
        {
        Color: Blue;
        }

      -->
      </STYLE>


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

        function Mausdrueber()
        {
        Spalte4.className="over";
        }

        function Mauswech()
        {
        Spalte4.className="out";
        }

      //-->
      </SCRIPT>
Für den Funktionsaufruf im Link ist dann zu schreiben: 
        <A HREF="test.htm" OnMouseOver="Mausdrueber()" OnMouseOut="Mauswech()">
         <Erstens</A>

Dieses Prinzip wird im Beispiel 12b zur Anzeige eines Info-Textes bei der Mausberührung eines Links verwendet. Dabei wird mit der CSS-Anweisung Visibility (Werte: visible / hidden) das Ein- bzw. Ausblenden des Textes erreicht. Da der Info-Text nach dem Laden des Dokumentes noch nicht sichtbar sein soll, wird im BODY-Tag das OnLoad-Ereignis mit der zusätzlich definierten JS-Funktion Start() verknüpft.


Im Beispiel 12c wird per JavaScript direkt in absolut positionierte DIV-Container geschrieben. Dabei kommt die Funktion TextToDIV() zum Einsatz, der ein Text und die Position des zugehörigen DIVs übergeben werden: 
      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

        function TextToDIV(Text,Nr)
        {
        if(document.all)
        // IE 4/5+
        {
        eval("document.all.kasten"+Nr+".innerHTML=Text");
        }

        if(document.layers)
        {
        // Netscape 4.x
        eval("document.kasten"+Nr+".document.open()");
        eval("document.kasten"+Nr+".document.write(Text)");
        eval("document.kasten"+Nr+".document.close()");
        }

        if ((document.getElementById) && (navigator.appName=="Netscape"))
        {
        // Netscape 6
        document.getElementById('kasten'+Nr).firstChild.data=Text;
        }
        }

      //-->
      </SCRIPT>
Diese Funktion wird in den Beispiel-Links so aufgerufen: 
        <A HREF="test.htm"
        OnMouseOver="TextToDIV('Hier finden Sie weitere Informationen ...',1)"
        OnMouseOut="TextToDIV('',1)">Link 1</A>

Anmerkung: Die Idee zu diesem Tipp stammt aus einer Anfrage in der Newsgroup de.comm.infosystems.www.authoring.misc, die ich dort am 16.09.99 – mit einem im wesentlichen Beispiel 12a entsprechenden Posting – beantwortet habe.