dhosting
pytanie zadane 10 marca 2019 w Programowanie przez użytkownika anonimowy
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

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.

...