 Hoover-Effekt ohne zusätzliche Grafik
Sie möchten bei MouseOver zusätzliche Infos einblenden ohne Zuhilfenahme von JavaScript und Grafiktausch. das lässt sich mit einfachen Mitteln umsetzen.
|
|
Bei MouseOver Zusatztext einblenden ohne JavaScript und Zusatzgrafik
Wie viele Tiere gleichen Geschlechts nahm Moses in der Arche mit? Keine, das war Noah
... nur ein kleiner Kniff für Zwischendurch
Wenn der Mauszeiger sich über der Grafik des Stadtwappens befindet, wird zusätzlicher Infotext sichtbar.
Die Grafik dient als Verweisfläche. Unterhalb der Grafik habe ich Text notiert der ebenfalls in den Link eingebunden ist.
Ich habe eine eigene CSS-Klasse 'wappen' für den Link festgelegt. Die Textfarbe für diesen Link entspricht der Hintergrundfarbe #E3E2F7 .
Die Link-Textfarbe für 'hover' habe ich abweichend von der Hintergrundfarbe definiert.
a.wappen:link {color:#E3E2F7}
a.wappen:visited {color:#E3E2F7;}
a.wappen:hover {color:#7777C6;}
|
|
Quellcode
<a class="wappen" href="index.php">
<img title="Stadtwappen" src="wappen.gif" width="106" height="126" ... >
<br><br>
<span style="font-size:10px;color:#4F4F4F">unser Stadtwappen</span><br>
<br>
<span style="font-size:16px;">weitere Infos<br><br>
auf der Geilenkirchen-Seite</span>
</a>
<style type="text/css">
<!--
a.wappen {
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size: 14px;
color:#E3E2F7;}
a.wappen:visited {
color:#E3E2F7;}
a.wappen:hover {
color:#9000E0;}
-->
</style>
Erweiterung
Soll ein Text (klick mich) innerhalb des Links dauerhaft angezeigt werden, kann die Textfarbe mit einer Inline-Anweisung festgelegt werden.
Dazu schließen sie den Text in eine Span-Anweisung ein und legen die Textformatierung entsprechend fest.
<span style="color:#4F4F4F;">klick mich</span>
Der so formatierte Text ist unabhängig von den Angaben im CSS-Block für die Unterklasse 'wappen' jederzeit sichtbar.
|
|
<span style="color:#4F4F4F;font-family:Arial,sans-serif;">klick mich</span>
ohne Grafik
Ganz ohne Grafik geht das nach dem oben beschriebenen Verfahren natürlich auch. Hier zum Beispiel für eine Mathematikaufgabe mit Anzeige der Lösung bei MouseOver.
rot = permanent sichtbar |
|
<a class="unsichtbar" href="javascript:void(0)">
<span style="color:#4F4F4F;">3 × 8 =</span> 24
</a>
<style type="text/css">
<!--
a.unsichtbar {color:#FFFFFF}
a.unsichtbar:visited {color:#FFFFFF;}
a.unsichtbar:hover {color:#E00060;}
-->
</style>
 Textverwise mit CSS formatieren
Grafikverweise
Link auf Archive (ZIP-Dateien)
| 
Home • Verweise • Texte einblenden