Podświetlane linki

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-02-21

szukaj: podświetlane linki kolorowe linki hiperłącza odsyłacze

Dawniej linki były strasznie statyczne. Wykorzystując sam HTML nie dało się z resztą z nich zbyt wiele wykrzesać. Później z pojawieniem się DHTMLa, sytuacja lekko uległa zmianie, ale dopiero CSS [i poprawne interpretowanie kodu CSS przez główne przeglądarki] przyniósł przełom.

Na początek może zmiana koloru hiperłącza po najechaniu:

..
<html>
<head>
<title>Strona</title>
<style type="text/css">
a {
 color: black;
 text-decoration: none;
}
</style>
</head>
<body>
<a href="link.htm">To jest czarne hiperłącze bez podreślenia</a>
...

W powyższym przykładzie widać, że całą deklarację [bardziej fachowo - "regułę CSS"] wrzuciłem w sekcję head. Dzięki temu można bardzo łatwo zmieniać wygląd wszystkich linków na stronie. Zmień więc dopisując w regule a [między a { tu wpisz }] "color: red;". Zapisz i odśwież. jak widzisz odnośnik zmienił swój kolor. Dodaj obok niego nieskończoną liczbę odnośników, a zobaczysz, że wszystkie dzięki tej jednej regule zmienia swój wygląd!

Skoro już stworzyłeś link o innych właściwościach, niż te przypisane mu domyślnie, czas na zmianę wyglądu odnośnika po najechaniu:

..
<html>
<head>
<title>Strona
<style type="text/css">
a {
 color: black;
 text-decoration: none;
}
a:hover {
 color: silver;
 text-decoration: underline;
}
</style>
</head>
<body>
 <a href="link.htm">To jest czarne hiperłącze bez podreślenia, ale najedź na nie!</a>
...

W tym przykładzie dodałem kolejną regułę. a:hover służy do opisania właściwości odnośnika w sytuacji, w której kursor myszy znajduję się bezpośrednio nad nim. Jedyne co zmieniłem to kolor i przywróciłem podkreślenie.

Zmiana tła linku po najechaniu

Poprzednie przykłady zmieniały wygląd samego linku, teraz pokażę, jak zmienić wygląd tła linku w zależności od tego, co się dzieje:

..
<html>
<head>
<title>Strona</title>
<style type="text/css">
a { color: black; text-decoration: none; }
a:hover {
 color: silver; text-decoration: underline;
 background: blue;
}
</style>
</head>
<body>
 <a href="link.htm">To jest czarne hiperłącze bez podreślenia, ale najedź na nie!</a>
...

Jeśli znasz choć podstawy angielskiego to już się domyślasz, ze zmieniłem kolor tła po najechaniu na niebieski. Nie jest to najpiękniejszy kolor, ale tu chodzi o przykład.

Patryk 'yarpo' Jar

szukaj: podświetlane linki kolorowe linki hiperłącza odsyłacze

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!