Cara Menggunakan Onmouseover dan Onmouseout untuk Menciptakan Hover pada Image/gambar

Hal-hal yang teramat sederhana seringkali dibutuhkan pada saat-saat tertentu. Contohnya adalah membuat atau memunculkan hover sebuah gambar. Jika pada umumnya gambar yang berbeda harus dihasilkan melalui hover dengan menggunakan kode CSS yang disimpan di halaman edit HTML atau widget, dengan memanfaatkan onmouseover dan onmouseout, maka kode CSS tak diperlukan lagi. Cara seperti ini cukup praktis untuk digunakan di halaman posting atau di bagian yang lain seperti halnya di sidebar blog.

Dua buah gambar berbeda, melalui onmouseover dan onmouseout dapat dimunculkan pada satu tempat/ruang yang sama (seperti hover image). Ketika cursor disentuhkan pada gambar maka fungsi onmouseover bekerja sehingga gambar ke-2 terlihat. Saat cursor dijauhkan dari gambar (onmouseout), maka kembali gambar pertama terlihat. Dengan menggerakkan cursor di atas gambar di bawah ini, kemudian melepaskan/menjauhkan kembali cursor dari gambar, maka anda akan melihat bagaimana onmouseover dan onmouseout bekerja.



Fungsi seperti di samping biasanya bekerja dengan cara memanfaatkan hover yang dibangun dalam bentuk kode CSS dimana syntax-nya seperti contoh berikut:

.gambar {height:..px;width:..px;background:url(...jpg) center no-repeat;padding:..px;border:...;margin:..px; ...dst;}
.gambar:hover{background:url(...jpg) center no-repeat; ... dst;}

Untuk membuat efek hover image menggunakan fungsi onmouseover dan onmouseout seperti gambar di atas, kode yang digunakan sbb:

<img onmouseover="this.src='URL-image2'" src="URL-image1" onmouseout="this.src='URL-image1'" style="float:left;margin:0 10px 5px 0;height:101px;width:80px;" />

Contoh:

<img onmouseover="this.src='http://i39.tinypic.com/mvhp1j.gif'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6digIpkBV6hmhK2bhTDAobcc9yGNCzcM8WvFPUEjbTY84aR5jvgzpHlKKJrVyQzcfIbmZPgetz24S1jcEvKuywXPHk96Zc-awf9Ofx2US2xxttJm1JvVkiq5VFiLEbqq0Wn-LbbHc21U/s200/BloggerstuarsProfile.jpg" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6digIpkBV6hmhK2bhTDAobcc9yGNCzcM8WvFPUEjbTY84aR5jvgzpHlKKJrVyQzcfIbmZPgetz24S1jcEvKuywXPHk96Zc-awf9Ofx2US2xxttJm1JvVkiq5VFiLEbqq0Wn-LbbHc21U/s200/BloggerstuarsProfile.jpg'" style="float:left;margin:0 10px 5px 0;height:101px;width:80px;" />

Catatan & Keterangan:

• Gunakan dua buah gambar dengan ukuran yang sama.
• Penambahkan style berfungsi untuk membentuk berbagai variasi baru serta posisi gambar (border, padding, margin, border-radius, float dan beberapa kode lain yang diperlukan termasuk height dan width).
• Jika ingin membuat posisi gambar di kiri, kanan, atau center maka bisa ditambahkan float:left;, float:right; atau display:block;margin:..px auto;
• Penggunaan margin disesuaikan dengan posisi gambar (float:left; dan float:right;)
• Width dan height disesuaikan dengan ukuran gambar.

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• gubhug reyot
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin