Loading:

Majówka Programisty! [Książki drukowane -35%| Ebooki -50%]

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.ftp_pasv 2.ltrim() 3.ftp_get 4.fgetc() 5.hash_hmac 6.gzencode() 7.PDF_arc 8.yaz_errno 9.getmxrr 10.asoc()

56853.05

Zmiana obrazka po najechaniu myszką - CSS menu

Skrypt ten jest aktualnie [ 03/10/2009 ] używany na obecnej stronie Funkcje.net, w pasku na górze.

Skrypt generuje menu, które po najechaniu na element zmienia sie jego stan wizualny.

Musimy używać w tym przykładzie dwóch stanów menu jako jeden obrazek, na przykład:

Zaczynamy od kodu HTML, który wygląda poniżej:

<div class="menu">
 
    <a alt="Strona Główna" class="active" style="background:url(http://www.funkcje.net/images/przycisk1.gif);" ></a>
     <a alt="Spis Funkcji" class="notactive" href="http://funkcje.net/kategoria/3.html" style="background:url(http://www.funkcje.net/images/przycisk2.gif);" ></a>
     <a alt="Zbiór Skryptów" class="notactive" href="http://funkcje.net/kategoria/2.html" style="background:url(http://www.funkcje.net/images/przycisk3.gif);" ></a>
     <a alt="Kontakt" class="notactive" href="http://funkcje.net/kategoria/11.html" style="background:url(http://www.funkcje.net/images/przycisk4.gif);" ></a>
 
</div>

Teraz wystarczy dodać dwie klasy CSS:

/****** MENU NAWIGACYJNE *****/
 .active, .notactive:hover {
         float: left;
         height: 32px;
         width: 130px;
         background-position: 0 32px !important
 }
 
 .notactive {
         float: left;
         height: 32px;
         width: 130px;
         background-position: 0 0px
 }

UWAGA

Wystarczy pamiętać, aby w pliku CSS zmienić rozmiar obrazów (w tym przypadku 130x32px) oraz ilość pikseli w background-position z "32px" na odpowiedzialny dla naszych rozmiarów ( w 32 pikselu osi y rozpoczyna się nowy stan menu w obrazie ).