![Weso³ych ¦wi±t ;]](http://funkcje.net/images/logo_christmas.png){kind=logo}
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;
}
{
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;
}
Dodano przez: altres Ranga: 0 Punktów: 0
Komentarze użytkowników
-
-
Tre¶æ komentarza
-
:: Losowe artykuły
:: Wymiana linków
Modowe inspiracje |
Android Gry i Aplikacje |
ZaplanujTransport.pl: Przeprowadzki, transport, aukcje |
Logo dla firmy |
Change Tires - Car Weather Forecast Reminder |
Laminas: MVC Framework for PHP |
IT Books Reviews and Programming: JS, JAVA, PHP, ANDROID, CSS |
Katalog roślin |
Programming articles: JAVA, PHP, C++, Python, JavaScript |
Kancelaria Adwokacka Łukasz Huszno
