Sammer schrieb folgenden Kommentar zum letzten Blog-Eintrag:
Darf ich mal fragen, wie das bei den japanischen Schriftzeichen gelöst ist, dass die Lesung angezeigt wird, wenn man mit der Maus drüberfährt?
Gibt's da ein Plugin für?
Antwort:
Den MouseOver-Effekt habe ich mit CSS implementiert. Dazu habe ich das vorgegebene Blogger-Layout erweitert (Tab Layout - HTML bearbeiten) und folgenden CSS-Code hinzugefügt (zwischen den Tags <style> und </style>):
/* Klasse Jap = Japanisch */
A:link.Jap,
A:visited.Jap {
; color: inherit /* gererbte Farbe i.d.R. Schwarz */
; text-decoration: none /* Unterstreichen ausschalten */
; border-bottom: 1px dotted #666 /* gepunktet unterstreichen */
}
/* KBD = Lesung in Roumaji */
A:link.Jap SPAN {
; color: #fff /* Textfarbe weiß = unsichtbar */
}
A:hover.Jap SPAN {
; color: inherit /* Textfarbe geerbt = sichtbar */
}
Um den Effekt im Blog zu benutzen muss man das HTML des Eintrags bearbeiten.
Beispiel:
<a class="Jap" href="#">ひらがな <SPAN>hiragana</SPAN></a>
Im Blog sieht das dann in etwa wie folgt aus:
ひらがな hiragana
Natürlich kann man statt KBD auch ein anderes Tag nehmen oder für die Lesung eine eigene Klasse definieren. Diese Musterlösung ist leicht vereinfacht.
Es gibt noch einen weiteren Lösnug für die dynamische Darstellung der Lesung, welche ich in anderen Dokumenten verwende. Dabei wird die Lesung als ToolTip am Mauszeiger angezeigt. Die oben gezeigte Lösung hat aber den Vorteil, dass man auch nach der unsichtbaren Lesung suchen kann.
siehe auch j.mp/CSS-Tooltips
Keine Kommentare:
Kommentar veröffentlichen