Schon besucht?
Es gibt viele M?glichkeiten, den Besucher auf einen bereits besuchten Link aufmerksam zu machen. Nachfolgend m?chte ich Ihnen einige davon vorstellen.
Der Einfachheit halber werden s?mtliche Effekte in den Beispielen "on hover" ausgel?st.
Farben
Eine der wohl am meisten verwendeten M?glichkeiten ist die dem besuchten Link eine andere Farbe zu geben.
a:visited {color: #006600;}
Durchgestrichen
Eine ganz einfache Art aber f?r den Besucher sehr effektiv, ist den Link durchzustreichen.
a:visited {text-decoration: line-through;}
Der Trick mit dem Hintergrundbild
Als n?chstes werden wir ein Hintergrundbild plazieren. Dazu gibt es verschiedenen M?glichkeiten. Wir plazieren das Bild vor den Link und zeigen es an wenn der Link besucht wurde. Damit das Bild Platz hat erstellen wir vor dem Link und nach dem vorhergehigen Buchstaben einen Abstand.
a:visited {padding-left: 12px;}
Anschliessend f?gen wir das Hintergrundbild ein.
a:visited{padding-left: 12px; background: url(/images/cross.jpg) no-repeat 0% 50%;}
Manipulation der Schriftgr?sse und Schriftart
Bei diesem Beispiel werden wir die Schrift selbst ver?ndern.
Beispiel: Kleinere Schrift:
a:visited {font-size 80%;}
Beispiel: Grossbuchstaben
a:visited {text-transform: uppercase;}
Der Hintergrund wird farbig
Hier ver?ndern wir die Farbe des Hintergrunds
a:visited {background: #ffff3f;}
Optische T?uschung
Bei diesem Beispiel erstellen wir zuerst ein Image welches die beiden gew?nschten Sichten zeigt.
Der folgende Trick ist nun nicht das Image auszutauschen, sondern nur die Position der Sicht zu wechseln. Nachfolgend die "Styles" die es dazu braucht.
Zuerst setzen wir das "a" Element. Hierbei ist wichtig "width" anzugeben, da das Element keinen geschriebenen Text aufweist.
a
{
display: block;
width: 100px;
height: 20px;
background: url("images/background.jpg") 0 0 no-repeat;
}
Weiter wird nun im Element a:visited die "background-position" mit einer negativen Position angegeben.
a:visited
{
background-position: -100px 0;
}
Zurück