Demoseite zur Gestaltung von visited Links mit Häkchen

1. Die Idee:

Visited Links sollen nicht durch eine andere Farbe gekennzeichnet werden, sondern durch ein Häkchen rechts neben dem Link. Das ist irgendwie eindeutiger als andere Formatierungen, abgehakt eben ;-).

Hier die entsprechende CSS-Formatierung:

a:visited {
background: url(bildordner/visited.gif) right bottom no-repeat;
color: #0033cc;
text-decoration: none;
padding: 0 16px 0 0;
}

Das Häkchen ist eine kleine 16 x 16px grosse gif mit transparentem Hintergrund.

2. Linkliste mit Textlinks

Wenn Sie bei der folgenden Linkliste einen Link nach dem anderen anklicken und mit der zurück-Funktion Ihres Browsers zurückkehren, sehen Sie den Effekt. Die bereits besuchten Links sind dann mit einem Häkchen versehen.

Linkliste:

3. Bilder als Link

Bei der Verwendung von Bildern als Link muss man sich etwas einfallen lassen. Die verschiedenen Browser setzen das Häkchen an unterschiedlichen Positionen, teilweise auch gar nicht, das Häkchen verschwindet dann wohl unter dem Bild. Deshalb hier eine kleine Demonstration und Anleitung, mit Code-Beispielen und Erläuterungen.

Meine Lösung: das Bild wird einfach in ein div gepackt, das genau so breit wie das Bild ist, und mit einer Bildunterschrift versehen. Bild und Bildunterschrift sind ein einziger Link, da sonst je nach Browser sowohl für das Bild als auch für die Bildunterschrift ein Häkchen erzeugt wird.

Die divs um die Bilder habe ich zum besseren Verständnis rot umrandet, in den Code-Beispielen ist dieser rote Rand nicht berücksichtigt.

3.1 Bild mit Bildunterschrift als Link

Bild vergrössern »

Hier ist ein Bild als Link zu einer html-Datei mit einer Grossansicht des Bildes formatiert. Unterhalb des Bildes ist die Bildunterschrift platziert. Bild und Bildunterschrift sind ein einziger Link, das können Sie sehen, wenn Sie mit der Maus über das Bild fahren.

Klicken Sie nun das Bild an und kehren Sie zu dieser Seite zurück, dann erscheint das Häkchen rechts neben der Bildunterschrift.

Durch die Formatierung a:visited {background: url(bildordner/visited.gif) right bottom no-repeat;} erscheint der Haken unten rechts.

Hier der Code:

<div style="float: right; width: 220px; text-align: right; line-height: 1.8em; border: 0; margin-left: 20px;">
<a href="linkziel.html">
<img src="bildordner/demo.jpg" style="float: right; border: 1px solid #666666;" alt="Bild 3 Kamele">
<br clear="all">Bild vergrössern »
</a>
</div>

3.2 Bild ohne Bildunterschrift als Link

Dieses Bild hat in Wirklichkeit auch eine Bildunterschrift, eine maskierte Leerstelle ( ). Die bekommen Sie zu sehen, wenn Sie mit der Maus über das Bild fahren.

Dadurch erscheint auch hier das Häkchen unten rechts unter dem Bild, wenn der Link bereits besucht wurde, neben der maskierten Leerstelle.

Wenn Ihnen einige Formatierungen unsinnig vorkommen, dann liegt das mal wieder am IE6. Seltsamer Weise erscheint das Häkchen nur, wenn das Bild innerhalb des div rechts gefloatet ist. Deshalb muss das umschliessende div immer genau so breit sein wie das Bild.

Hier der Code:

3.3 Bild als Link mit Textlink und Begleittext

Diese Variante kommt oft bei Linklisten zu Anwendung: Bildlink (Bild, Logo oder Screenshot), Textlink und eine kurze Beschreibung der verlinkten Seite.

3 Kamele im Zoo Görlitz »

Bei dieser Variante kann ich mir das umschliessende div sparen. Auch das <br clear="all"> entfällt. Da das Bild rechts gefloatet ist, erscheint der Textlink links im Textfluss. Bild und Textlink sind auch in diesem Fall ein einziger Link, auch hier können Sie das überprüfen, indem Sie mit der Maus über das Bild fahren und dabei den Textlink im Auge behalten.

Da der Textlink im HTML nach dem Bild notiert ist, erscheint auch hier das Häkchen hinter dem Textlink. Diese Position betrachtet der Browser als "right bottom", bezogen auf den gesamten Link.

Hier der Code:

<a href="linkziel.html">
<img src="bildordner/demo.jpg" style="float: right; border: 1px solid #666666; margin: 8px 0 15px 20px;" alt="Bild 3 Kamele">3 Kamele im Zoo Görlitz »
</a>
<p>Begleittext ...</p>

Diese Art der Gestaltung von visited Links habe ich auf meiner eigenen Seite verwirklicht:

zurück zum Artikel im ge-weblog »