Loading:

Postaw na rozwój kariery w IT [Książki drukowane -40%| 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.udm_hash32 2.gztell() 3.bool sort 4.imagefill 5.bzclose() 6.uksort() 7.chr() 8.link 9.array() 10.srand

56853.05

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

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;
}