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.
