CSS-Tricks: Kennzeichnung von besuchten Links

Abgehakt – Kennzeichnung von besuchten Links

Eine ewige Diskussion unter Webdesignern zum Thema Benutzerfreundlichkeit von Internetseiten ist die Frage, ob man bereits besuchte Links (visited Links) kennzeichnen sollte oder nicht.

Bei kleinen und übersichtlichen Webseiten ist es meiner Meinung nach nicht notwendig, die gerade besuchten Links extra zu kennzeichnen. Wenn Sie jedoch eine große Linkliste (zum Beispiel http://www.mitchinson.net/resources.php ; überhaupt keine Kennzeichnung!) besuchen und dort die einzelnen Punkte abarbeiten wollen, werden Sie schon bald die Übersicht verlieren. Schon nach einigen besuchten Links wissen Sie kaum mehr, welche Seiten Sie nun schon aufgerufen haben und welche nicht.

Sie können natürlich die besuchten Links farblich anders gestalten oder mit unterstreichen bzw. [nicht unterstreichen] formatieren, doch auch hier werden Sie nach einiger Zeit nicht mehr genau wissen, welche Farbe die noch nicht besuchten und welche die bereits besuchten Links kennzeichnet.

Es gibt jedoch eine elegante und einfache Art, besuchte Links mit Grafiken auszustatten.
Sie nehmen so genannte checkmarks (Häkchen) oder auch andere Grafiken mit transparentem
Hintergrund und platzieren diese links oder rechts neben den visited Links.

Auf der Grundlage von http://css-tricks.com/examples/CheckVisitedLInks/ möchte ich Ihnen folgendes Beispiel vorstellen:

[Zip-Datei 43 KB]

Das Häkchen ist ein kleines gif, 11 x 11px mit transparentem Hintergrund, für die Schriftgrösse 1.5em. Das Aussehen der visited Links definiere ich mittels CSS:

/* ===============================
   2. Formatierung der Hyperlinks
   =============================== */
a, a:link { color: #FFFF00;
           text-decoration: none;}
a:visited { padding-left: 14px;
           background: url(checkmark2.gif) left no-repeat;
           color: #c0ff00; }
a:hover { text-decoration: underline; }
a:active { color: green;}

Es ist meist sinnvoll, diese Definition auf bestimmte IDs zu beschränken, so dass Links im Kopf oder im Fuss der Seite weiterhin normal angezeigt werden.
Klicken Sie einfach auf einige Links in den untenstehenden Webseiten, damit Sie sehen, wie die Kennzeichnung der visited Links funktioniert.

Wie Sie die besuchten Links wieder als nicht besucht kennzeichnen können, hängt davon ab, welchen Browser Sie gerade verwenden. Ich arbeite mit dem Mozilla Firefox und habe mir hier das Web Developer 1.1.6 Add-on auf dem Browser installiert. Hier kann ich dann ganz einfach unter dem Punkt „Verschiedenes“ alle besuchten Links wieder als nicht besucht markieren.

Ob und wie dies in anderen Web-Browsern funktioniert, ist mir leider nicht bekannt;
auch nach intensiver Recherche konnte ich keine zufriedenstellende Antwort im Netz
finden. Sollten Sie darüber Bescheid wissen, melden Sie sich bitte bei mir.

Beispiele – wie man es machen sollte!

http://css-tricks.com/examples/CheckVisitedLInks/
http://www.ge-webdesign.de/blog/43_abgehakt-kennzeichnung-von-besuchten-links.html
http://www.alvit.de/web-dev/
http://www.alvit.de/handbook/ [hier kommt eine andere Grafik zum Einsatz]

Beispiel-Seiten: (so sollte es nicht(!!) sein!)

http://www.mitchinson.net/resources.php
http://www.webdesignbeach.com/beachbar/
http://www.lorm.de/2008/01/02/102-quellen-fuer-kostenlose-fotos/
http://www.forwebdesigners.com/