pytanie zadane 10 marca 2019 w Programowanie przez użytkownika Gość
edycja 10 marca 2019 przez użytkownika
Jak zrobić w CSS/HTML tak, żeby po najechaniu myszką na zdjęcie (które się już wyświetla), zmieniało się na inne dowolne zdjęcie/obrazek? Natomiast gdy odjadę kursorem myszki z obrazka, żeby pojawiało się te pierwsze pierwotne zdjęcie.

1 odpowiedź

odpowiedź 10 marca 2019 przez użytkownika
edycja 12 stycznia 2020 przez użytkownika

Można to spokojnie zrobić w HTML+CSS.

W pierwszej kolejności należy dodać do głównego pliku arkuszy stylów (najczęściej style.css) poniższe linijki kodu:

.zmobr {position:relative;}
.zmobr img {border:none;}
.zmobr span {position:absolute; left:0; top:0; display:none;}
.zmobr span {display:inline;}

Następnie w sekcji <body> w kodzie HTML strony wstawiamy kod wskazujący oba obrazki i wywołujący selektory css:

<a class="zmobr" href="#no"><img src="img/zdjecie1.jpg"/>
<span><img src="img/zdjecie2.jpg"/></span></a>

W tym przypadku zdjecie1 i zdjecie2 mogą się od siebie różnić rozmiarem, aczkolwiek dla estetyki powinny być takie same.

Efekt, będzie taki, że po najechaniu kursorem myszki na zdjecie1.jpg, wyświetli się zdjecie2.jpg. Po zjechaniu kursora ze zdjęcia, wyświetli się z powrotem pierwsze zdjęcie.

komentarz 3 lutego 2020 przez użytkownika Gość
Dzięki za poradę. Tej funkcji szukałem na swoją stronę. A wiem że mało kiedy jest coś takiego potrzebne na stronie internetowej. No ale mi akurat był taki bajer potrzebny.
...