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 31 stycznia 2024 przez użytkownika

Można to spokojnie zrobić za pomocą języka skryptowego HTML+CSS.

W pierwszej kolejności należy dodać do głównego pliku arkuszy stylów (najczęściej style.css) lub w samym pliku .html w sekcji <head>, 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 lokalizację  obu obrazków na serwerze 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.jpg i zdjecie2.jpg mogą się od siebie różnić rozmiarem, aczkolwiek dla estetyki powinny być o takim samy rozmiarze. Dzięki czemu będzie się to ładnie prezentować na stronie i nie będzie jej rozciągać lub zniekształcać w tym miejscu.

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.
...