Loading:


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



Napisz Artykuł

Listing

niema


kontakt w sprawie miejsca



Dodano przez: divix
Ranga: Administrator serwisu Punktów: 38423
Komentarze użytkowników
    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-19 v.1.5 | design: diviXdesign & rainbowcolors