Loading:

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.TOKEN 2.lcfirst() 3.yaz_search 4.com_invoke 5.bool sort 6.Imieniny 7.ob_flush() 8.wordwrap() 9.chop() 10.filetype()

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