![BLACK WEEK IT! [Zgarnij książkę GRATIS lub kupuj solo z rabatem do -50%]](https://static01.helion.com.pl/helion/img/promocje/xzay/box_1180x419_1x_druk__Black_week_2_zestawy_2024_Rpolony_a0d7b42e2-z1.png)
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
