Loading:


Zmiana obrazka po najechaniu myszką za pomocą hover

Przedstawię w tym artykule jak za pomocą css i funkcji hover zrobić zmianę obrazka po najechaniu myszką zaletą tego sposobu jest to że obrazek nie ładuje się podczas najechania tylko przy wejściu na stronę

 

wstawiamy to w miejsce gdzie ma być obrazek

Kod html

<a class="foto" href="#"><span>tekst zastępczy</span></a>

Teraz tworzymy obrazek mój ma wymiary 316x121



Teraz tworzymy drugi obrazek który będzie wyświetlany po najechaniu myszką



Teraz łączymy te 2 obrazki w taki sposób



i wstawiamy kod css który znajduje się dalej w artykule


Napisz Artykuł

Listing

a.foto
{
background: url(obrazek.jpg) no-repeat;
display:block;
height:121px;
overflow:hidden;
width:316px;
}
a.foto:hover
{
background-position: 0px -121px;
}
a.foto span
{
display:block;
text-indent: -9999px;
}


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=4&t=5980

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: altres Ranga: Poziom 10 Punktów: 449
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-13 v.1.5 | design: diviXdesign & rainbowcolors