Cara Membuat Gambar Yang Berubah Ketika Pointer Mouse Berada Diatasnya

Berbeda dengan gambar .gif. Efek ini akan membuat gambar bisa berubah ketika mouse kita berada diatas gambar. Dan setelah mousemu menjauhi gambar itu. Maka itu akan kembali menjadi gambar semula. Tapi, untuk membuat efek ini kita harus mencari dulu 2 gambar yang sama ukurannya. Sebagaimana contoh dari efek ini kutaruhkan dibawah ini

Letakkan pointer mouse diatas gambar dibawah ini:

Secara simpel saya berikan kodenya dibawah ini:

<a href="Alamat URL"><img src="Alamat URL dari gambar pertama" onmouseover="this.src='Alamat URL dari gambar kedua'" onmouseout="this.src='Alamat URL dari gambar pertama'" /></a>

Ubahlah:
Alamat URL menjadi alamat yang dituju ketika gambar diklik
Alamat URL dari gambar pertama menjadi alamat gambar pertama yang sudah kamu upload
Alamat Url dari gambar kedua menjadi alamat gambar kedua yang sudah kamu upload.

Kamu bisa memasukkan kode ini kedalam blog menjadi widget, atau masukkan kedalam blog post dengan mengedit HTML.

(kredit: Helplogger)

Kategori: desain blogger