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.
