Cara Paling Mudah Membuat Mouse Over Button Pada Gambar

Tau itu apa yang dimaksud dengan Mouse Over Button? Sebelumnya admin Akhbar Islam baru saja pulang dari Siak, mengunjungi sahabat yang akad nikah sekalian silaturahmi dengan sahabat Akhbar Islam (Aman Syahroni) yang baru saja menikah. Selamat untuk Aman Syahroni dan Suri, semoga menjadi keluarga yang sakinah, mawaddah dan rahmah. Barakallahulakuma Wabaraka’alaikuma, Wajama’a bainakuma fii khair, amiinn…

Haishh… malah lari nih dari pokok pembicaraan. Kembali ke tema kita tadi :D. Cara Mudah Membuat Mouse Over Button yakni ketika kita mengarahkan mouse ke suatu tombol (button) maka tombol tersebut akan berubah warna, atau bahkan berubah bentuknya. Terus terang, saya juga kemarin sempat bingung bagaimana cara membuatnya… sudah hampir habis keringat cari di Photoshop, coba sana coba sini, tidak juga dapet… Coba searching di mbah kita Google eh malah ga tau keywordnya apa. Terakhir ada seorang sahabat yang enggan disebut namanya, jadi saya bongkar dah rahasia siapa orang tersebut :D) yang selalu di sebut “Google” 😀 memberitahukan saya satu trik sederhana yang sangat luar biasa!!! :D…

Biar tidak pada kebingungan, langsung saja Akhbar Islam memberikan satu contoh dari Mouse Over Button. Silahkan anda arahkan cursor anda ke Gambar di bawah ini:

Sudah mengerti maksud dari Mouse Over Button? Saya rasa sudah ya… 😀 Baiklah saya akan memberikan step by step cara mudah membuatnya. Berikut hal yang perlu anda lakukan:

1. Sediakan 2 Gambar yang serupa tapi beda warnanya, 1 untuk Gambar utama, dan yang satu lagi untuk Gambar Hovernya. Sebagai contoh:

Gambar Utama

dan Gambar Hovernya:

Gambar Hover (Bedakan bentuk tanpa merubah ukuran dan posisi)

• Alamat URL Gambar Utama: https://2.bp.blogspot.com/-WXdUmqnJVf0/UZxPsqUa5PI/AAAAAAAAAkc/R8DXeo0Gtrg/s1600/akhbar.png
• Alamat URL Gambar Hover: https://4.bp.blogspot.com/-a8Gec3QUP74/UZxPsQaGcqI/AAAAAAAAAkY/9vIqOI5ND18/s1600/akhbar-hover.png

2. Sekarang Susun kode html seperti berikut sesuai dengan alamat url gambar anda:

<img src="https://2.bp.blogspot.com/-WXdUmqnJVf0/UZxPsqUa5PI/AAAAAAAAAkc/R8DXeo0Gtrg/s1600/akhbar.png" onmouseover="this.src='https://4.bp.blogspot.com/-a8Gec3QUP74/UZxPsQaGcqI/AAAAAAAAAkY/9vIqOI5ND18/s1600/akhbar-hover.png';" onmouseout="this.src='https://2.bp.blogspot.com/-WXdUmqnJVf0/UZxPsqUa5PI/AAAAAAAAAkc/R8DXeo0Gtrg/s1600/akhbar.png';" />

3. Memberi alamat atau mengarahkan link tujuan ketika tombol di klik:

Contohnya bisa anda klik tombol atau gambar dibawah ini:

Cara membuatnya tinggal anda tambhkan code berikut ini:

<a href=”Link Tujuan“> Kode Gambar </a>

Contoh:

<a href="https://blog.sifirman.com"><img src="https://2.bp.blogspot.com/-WXdUmqnJVf0/UZxPsqUa5PI/AAAAAAAAAkc/R8DXeo0Gtrg/s1600/akhbar.png" onmouseover="this.src='https://4.bp.blogspot.com/-a8Gec3QUP74/UZxPsQaGcqI/AAAAAAAAAkY/9vIqOI5ND18/s1600/akhbar-hover.png';" onmouseout="this.src='https://2.bp.blogspot.com/-WXdUmqnJVf0/UZxPsqUa5PI/AAAAAAAAAkc/R8DXeo0Gtrg/s1600/akhbar.png';" /></a>

Silahkan anda ganti https://blog.sifirman.com dengan alamat link yang anda inginkan.

Semoga tutorial perdana ini bisa bermanfaat bagi kita semua amin… Jika ada yang membingungkan, silahkan komentar dibawah…