header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14
Templates für CMSimple_XH von
KRL Software-Development
private, nicht kommerzielle Website
by Karl Richard Lembach
Letzte Bearbeitung:

mausbild

span.mausbild - lässt ein im Text enthaltenes ausgeblendetes Bild beim Hovern des Textes erscheinen.
Ein Text, der nach fertiger Formatierung als Hover-Sensor dienen soll, wird fertig geschrieben. An der gewünschten Stelle wird dann das Bild eingefügt. Es wird bei der Hover-Anzeige mit der nativen Größe eingeblendet. Jetzt wird der Text, der als Hover-Sensor dienen soll, markiert und mit dem Format span.mausbild versehen. Dann wird, ohne die Textmarkierung zu verändern, der markierte Text mit einem Link versehen mit dem Ziel '#'1. Es geht dabei nur darum den Hover-Effekt des Links zu verwenden. Die Reihenfolge ist wichtig! Zuerst das Format, dann der Link.

Im Editor wird das Bild im nicht-gehoverten Zustand auf 30 px Breite beschränkt angezeigt und wird beim Hovern 50 px breit.

Dies ist ein Fließtext ohne wirkliche Bedeutung oder sinngebenden Inhalt. Er dient nur zur Demonstration des Hover-Effektes in Verbindung mit einem Bild.

fgh gh ggh gfdgh ggg fg f fg fg fg sgf sg hs gfh fg hd fgh dg hd gf fgg

 

Geht man so vor, erhält die Textmarkierung als Verweisziel den Seitenanfang. Das hat zur Folge, dass bei einem versehentlichen Klick der Seitenfocus auf den Seitenanfang springt. Das kan man wie folgt verhindern:
Man erstellt eine Textmarke (Anker = ) am Ende der Zeile vor dem "mausbild" - Text, z.B. mit der Bezeichnung x.
Jetzt wird der Text, der als Hover-Sensor dienen soll, markiert und mit dem Format span.mausbild versehen.
Dann wird, ohne die Textmarkierung zu verändern, der markierte Text mit einem Link versehen, mit dem Ziel '#x'.
Wird nun auf den Link versehentlich geklickt, springt der Focus lediglich eine Zeile hoch.

 


| Seitenanfang |