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.

.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/AVvXsEiCxX_nEEr-pkDH7X5AX_2AoyWb-oHS01oZ1u1fPeZ4iXgO4nx7qmiNdkUShMfxRgySa1KCitgX_ekFjauBJSAhBYA_v7DYTUjuB-7svHxbkjlkCfc9iNWAzQEx2x8K1RtPwmHLkQwoPkY/s200/BloggerstuarsProfile.jpg" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCxX_nEEr-pkDH7X5AX_2AoyWb-oHS01oZ1u1fPeZ4iXgO4nx7qmiNdkUShMfxRgySa1KCitgX_ekFjauBJSAhBYA_v7DYTUjuB-7svHxbkjlkCfc9iNWAzQEx2x8K1RtPwmHLkQwoPkY/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.

Salam buat sobat blogger ... ...

Aku hanyalah seorang blogger yang kebetulan suka nulis, suka ngenet dan terutama suka uothak-uathik template blogspot. Bila sampeyan menyukai semua yang telah aku coba tulis dan terbitkan, aku hanya berharap bahwa semuanya bisa memberi manfaat dan mungkin juga bisa memberi dorongan untuk terus nglembur, nulis dan selalu memeras otak menuangkan hal-hal baru yang bermanfaat bagi pembaca. O, ....ya ..., Orang-orang atau tetangga sebelah biasa memanggil ku dengan sebutan si gubhug reyo gila, "yang suka melek malam dengan asap lintingan tak pernah telat". Yah ... moga-moga saja sampeyan semua nggak ikutan memanggil ku seperti para tetangga sebelah! Makacih, ya, atas kunjungannya. Maap nggak bisa kasih wedang kopi ma roti bolu!

Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
http://Iyan Bjm.blogspot.com