Membuat Efek Gambar Berubah Saat Kena Mouse

Membuat Efek Gambar Berubah Saat Kena Mouse - Jika anda pernah menemukan sebuah postingan yang memiliki gambar dan jika ponting mouse diletakan di atasnya, tiba-tiba gambar berubah, nah itu bisa disebut sebagai rollover Image effect.

Cara pembuatannya bermacam-macam, bisa memakai kode javascript, atau yang paling mudah adalah dengan menggunakan kode html biasa. Disini Tukang Toko Online akan membagikan cara membuat effect Rollover gambar tersebut dengan menggunakan kode HTML biasa.

Contohnya adalah sebagai berikut :



Caranya cukup mudah, tinggal memasang kode html berikut, kemudian isikan link gbr sesuai tempatnya.

<img src="link_gambar_pertama_disini" onmouseover="this.src='link_gambar_kedua_disini'" onmouseout="this.src='link_gambar_pertama_disini'" />

Anda juga bisa mengkombinasikan dengan menambahkan link url tertentu untuk gambar tersebut seperti ini.

<a href="link_web_tujuan"><img src="link_gambar_pertama_disini" onmouseover="this.src='link_gambar_kedua_disini'" onmouseout="this.src='link_gambar_pertama_disini'" /></a>

Hampir sama seperti halnya cara memasang gambar dengan kode html.

Tinggal masukkan link sesuai dengan keterangan kode di atas, dan hasilnya akan terlihat seperti contoh gambar tersebut. Usahakan agar ukuran kedua gambar sama, agar hasilnya bisa rapi dan serasi.  Selanjutnya anda bisa memasang kode tersebut di tempat yang anda inginkan. Selamat mencoba.