Jak przy pomocy CSS zastąpić JavaScript?
Bardzo wiele osób nadal korzysta z JavaScriptu do wykonania czynności, które można zrobić dużo szybciej w CSS. Na przykład taki rollover, czyli efekt zamiany np. obrazka na inny po najechaniu na niego kursorem. Męczą się ciągle z onmouseover=... i nie wiedzą, że dużo szybciej i prościej można zrobić to w CSS.
Rollover odnośnika
Przygotowujemy dwa obrazki. Oba mają przedstawiać przycisk bez tekstu, ale jeden ma być wciśnięty, a drugi niewciśnięty. W arkuszu stylów przygotowujemy taki wpis:
a.menu {
height: 120px; /*rozmiary dostosowane do obrazków*/
width: 60px;
display: block; /*użycie diva zamiast a nie dałoby w IE pożądanych efektów*/
background: url(niewcisniety.gif);
}
a.menu:hover {
background: url(wcisniety.gif);
}
A potem tylko wystarczy każdy link wpisywać jako:
<a href="plik.html" class="menu">Tekst linka</a>
Napis "Nowość"
Czasami na stronach pojawiają się wyróżnione napisy "Nowość" lub mały obrazeczek znaczący mniej więcej to samo. W kursie HTML Pawła Wimmera jest nawet dostępny specjalny skrypt do tego służący. To było dobre kiedyś. Teraz mamy przecież CSS! Niestety, elementy CSS jakie tutaj opisuję okazały się za trudne dla programistów Microsoftu i nie zaimplementowali ich do tej pory w swojej przeglądarce. Mianowicie mam tutaj na myśli pseudoelementy :before i :after. Używa się ich podobnie jak :hover, ale mają zupełnie inne działanie.
.nowe:before {
content: "NOWOSC>>";
}
.nowe:after {
content: "<<NOWOSC";
}
Każdy element, do którego będzie przypisana klasa "nowe" będzie posiadał napis "NOWOSC" przed i za sobą.