Temat: Problem z stroną www
No to po kolei.
1. Stan guzików można przedstawić przy pomocy jednego obrazka. W górnej połowie dajemy fragment widoczny normalnie, poniżej fragment widoczny po najechaniu myszką. Dzięki temu po połączeniu mamy szansę na uzyskanie mniejszego obrazka niż dwa pojedyncze (warto sprawdzić czy png da lepszy rezultat niż gif).
2. Kod js bezpośrednio w kodzie strony działa, ale wprowadza niekiedy zamęt i czasami nie zadziała jak trzeba (ten z podświetlaniem powinien działać wszędzie).
3. Zamiast czystego js (który w zależności od twórców przeglądarek różnie działa) warto użyć jakiegoś gotowca w postaci jQuery czy MooTools.
4. I nadeszła pora na właściwą część. Kod podany w pierwszym poście odpowiada nie za kliknięcie, a najechanie myszką na obrazek. Jak więc to ma być zrobione? Jeśli zgodnie z przedstawionym przykładem, to robimy to następująco:
<div id="#id_elementu"><ul><li class="el1"><a href="adres">tekst</a></li><li class="el2"><a href="adres">tekst</a></li></ul>
w css robimy:
#id_elementu li.el1 {
background-image: url( obrazek1.png ) ;
display: inline-block ;
width: ...px ;
height: ...px ;
}
#id_elementu li.el1:hover {
background-position: 0 -...px ;
}
li.el1 a {
display: block ; width: 100% ; height: 100% ; text-indent: -9999px ;
}
Pisane z pamięci, możliwe, że coś przeoczyłem albo dodałem niepotrzebnie. Szerokość i wysokość należy wpisać zgodnie z wymiarami połówki obrazka. Pozycję tła przesuwamy o -liczba piksli (czyli też o połowę wysokości obrazka).
Do takiej podmiany obrazków nie jest potrzebny js.