Loading:

BLACK WEEK IT! [Zgarnij książkę GRATIS lub kupuj solo z rabatem do -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.uksort() 2.urlencode 3.passthru 4.strstr() 5.yaz_syntax 6.pclose 7.arsort() 8.yaz_errno 9.implode() 10.eval

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 ).