Transcom-Logo. Transcom bietet Technische Dokumentation und technische Kommunikation
 
» Home  > Tipps + Tricks  > Internet  > Text und Mouse-over English  Deutsch

Text und Mouse-Over-Effekte

Eigentlich ist es fast schon Standard im Internet: Hyperlinks sehen nicht nur anders aus, als der Rest der Seite, wenn ich mit der Maus drüberfahre, verändern sie sich auch. Im Regelfall sind die Hyperlinks dann hübsche kleine Bildchen - selbst wenn sie aus reinem Text bestehen. Der Grund ist einfach: Dafür gibt es Scripte, mit denen funktioniert es in allen Browsern.

Anders sieht es bei echtem Text aus. Wer wegen der geringeren Dateigröße keine Pixel durchs Netz schicken möchte, erreicht entweder die Hälfte der Welt nicht oder muß herbe Einschränkungen hinnehmen.

Cascaded Style Sheets

Bei Verwendung von Cascaded Style Sheets (CSS) ist es ein ganz einfacher Befehl - der auch von diesen Seiten genutzt wird:

A { font-family: arial, verdana, Helvetica; color: #008000; text-decoration: none; cursor: hand; font-weight: bold}

A:hover { font-family: arial, verdana, Helvetica; color: "#FF0000"; text-decoration: none; cursor: hand}

Alle A-Tags (also die Hyperlinks) werden damit auf fette, grüne Schrift gesetzt, die Unterstreichung wird unterbunden. Wenn die Maus über den Link fährt, färbt er sich eventuell rot, wenn er nämlich in einem Internet Explorer dargestellt wird. In den CSS-Implementationsrichtlinien, an denen Microsoft und Netscape mitgearbeitet haben, wurde es den Programmierern nämlich freigestellt, ob sie Mouse-Over integrieren. Netscape "vergaß" es. Trotzdem: Dies ist die Methode, für die wir uns auf diesen Seiten entschieden.

JavaScript mit Mouse-Over-Event

Theoretisch ist es ganz einfach sein, in einem A-Tag (also in der Hyperlink-Definition) einen Mouse-Over- und Mouse-Out-Event zu definieren, die eine Funktion aufrufen, die z.B. die Farbe des Hyperlinks ändert. Praktisch funktioniert das im Internet Explorer, aber nicht im Netscape-Browser. Letzterer aktualisiert einfach zur Laufzeit nicht das Layout. Also keine Verbesserung gegenüber (Link intern) CSS, dafür mehr Aufwand.

<Span>-Tag und JavaScript

Ein anderer Ansatz ist der Span-Tag, bei dem innerhalb des Span-Bereichs "zur Laufzeit" von JavaScript Code samt Text ausgetauscht wird. Während der "einfache" Mouse-Over-Event im Netscape-Browser nicht funktioniert, mit <Span> geht es. Dabei kann sogar der anzuzeigende Text noch wechseln. Aber es funktioniert nur mit erheblichen Nachteilen: Da der <Span> als relativer Span definiert werden muß, werden die vom <Span>-Tag umfaßten Texte von den Browsern nicht richtig berechnet. Dementsprechend können die Links nur am Ende einer Zeile und nur einzeilig in die Seite integriert werden (ohne Zeilenumbruch!). Andernfalls wird das Layout nicht mehr vorhersehbar. (Erneut ist der Netscape-Browser miserabler in der Implementation als der Internet Explorer.)

Beispiel für eine Link-Definition mit <span> in HTML:

<p><small><span ID="Test" STYLE="position: relative"><a CLASS="item"
HREF="http://www.transcom.de"
onMouseOver="swapClass('Ja, ich will zur Testseite', 'Test', this.href, 'item', 'highlight', true)"
target="_blank">Testseite</a></span></small></p>

Weitere Informationen: (Link extern) Webreference

<ilayer>-Tag und JavaScript

Der <ilayer>-Tag ist erst in JavaScript 1.2 (ab Netscape Communicator 4) implementiert. Ältere Browser hätten also nichts davon. Außerdem funktioniert der <ilayer> auch wieder nur bei einzeiligen Hyperlinks: Bei Zeilenumbrüchen im Link-Text hätte die Funktion keine Chance mehr, die Layer-Grenzen sauber zu bestimmen. Nur einzeilige Texte sind aber genau da, wo Mouse-Over-Effekte am interessantesten sind (in der meist schmalen Navigationsspalte einer Seite) oftmals inakzeptabel.

Weitere Informationen: (Link extern) Inside DHTML


InvitationWare

  • Invitation (Englisch): Einladung
  • Invitation for tender: Ausschreibung

Die Informationen auf www.transcom.de sind InvitationWare: Einerseits sind Sie eingeladen, sie zu nutzen. Andererseits, wenn die Informationen auf diesen Seiten Ihnen geholfen haben oder die Tipps und Programme für Sie nützlich sind, dann erinnern Sie sich doch an Transcom, wenn Sie mal wieder einen Auftrag in einem unserer (Link intern) Fachgebiete zu vergeben haben — und senden uns eine Einladung zum Angebot. (Link intern) Rufen Sie uns an oder senden uns eine E-Mail.

» Transcom gehört zum Verbund der media offices