13/05/13

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, (Karena anda adalah pengunjung Akhbar Islam, jadi saya bongkar dah rahasia siapa orang tersebut :D) yang selalu di sebut "Google" :D 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... :D 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: http://2.bp.blogspot.com/-WXdUmqnJVf0/UZxPsqUa5PI/AAAAAAAAAkc/R8DXeo0Gtrg/s1600/akhbar.png
  • Alamat URL Gambar Hover: http://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="http://2.bp.blogspot.com/-WXdUmqnJVf0/UZxPsqUa5PI/AAAAAAAAAkc/R8DXeo0Gtrg/s1600/akhbar.png" onmouseover="this.src='http://4.bp.blogspot.com/-a8Gec3QUP74/UZxPsQaGcqI/AAAAAAAAAkY/9vIqOI5ND18/s1600/akhbar-hover.png';" onmouseout="this.src='http://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="http://www.akhbarislam.com"><img src="http://2.bp.blogspot.com/-WXdUmqnJVf0/UZxPsqUa5PI/AAAAAAAAAkc/R8DXeo0Gtrg/s1600/akhbar.png" onmouseover="this.src='http://4.bp.blogspot.com/-a8Gec3QUP74/UZxPsQaGcqI/AAAAAAAAAkY/9vIqOI5ND18/s1600/akhbar-hover.png';" onmouseout="this.src='http://2.bp.blogspot.com/-WXdUmqnJVf0/UZxPsqUa5PI/AAAAAAAAAkc/R8DXeo0Gtrg/s1600/akhbar.png';" /></a>

Silahkan anda ganti http://www.akhbarislam.com dengan alamat link yang anda inginkan.

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

Keyword:  Cara Paling Mudah Membuat Mouse Over Button, Trik, Tips, Bagaimana Cara Gampang, Tutorial Akhbar Islam.

Artikel Terkait

Cara Paling Mudah Membuat Mouse Over Button Pada Gambar
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

23 comments

13 Juni 2013 08.59 delete

Cara Paling Mudah Membuat Mouse Over Button Pada Gambar

Reply
avatar
13 Juni 2013 09.04 delete

keren banget bang.. i love this

Reply
avatar
13 Juni 2013 09.11 delete

ya kang... semoga bermanfaat...

Reply
avatar
13 Juni 2013 10.36 delete

tutorial yang bermanfaat, bisa langsung di coba ...
keren juga blognya gan !!!

follow back + Koment back
www.edisukarman.com

Reply
avatar
13 Juni 2013 10.41 delete

Blog agan juga keren... SEO friendly... Terimakasih kunjungannya kang... all done...

Reply
avatar
14 Juni 2013 01.06 delete

bagus gan artikelnya ,visit juga ya http://ranup-selaseh.blogspot.com/2013/06/mesin-waktu-nyata-atau-ilusi.html

Reply
avatar
14 Juni 2013 15.05 delete

Terimakasih kang atas kunjungannya... ;)

Reply
avatar
31 Agustus 2013 19.51 delete

terima kasih ya kk atas informasinya

Reply
avatar
Anonim
4 Oktober 2013 11.28 delete

Thanks banget gan ,, sangat membantu.. :D

Reply
avatar
1 Desember 2013 07.26 delete

thanks gan...
blognya agan ku suka colorfull..salam blogger nusantara

Reply
avatar
5 Desember 2013 18.53 delete

makasih gan, langsung ane pake diblog ane disini http://tulisankeluargakita.blogspot.com/p/gallery.html

Reply
avatar
20 Januari 2014 00.43 delete

wah keren banget bisa gitu ya, pengen coba ku pasang dibagian header.. makasih tutorialnya mas

Reply
avatar
8 Oktober 2014 09.27 delete

Iya... semoga bermanfaat... ^_^

Reply
avatar
8 Oktober 2014 09.28 delete

Rajin rajin berkunjung sob... |o|

Reply
avatar
8 Oktober 2014 09.35 delete

mantab gan... asoy... :-bd

Reply
avatar
8 Oktober 2014 09.36 delete

Iya mas..... semoga berhasil aja mas... :D

Reply
avatar
8 Juli 2017 06.12 delete

boleh minta contack a bg watsapp, BBm atau apa gitu

Reply
avatar
11 Agustus 2017 11.42 delete

lewat facebook juga boleh gan... https://www.facebook.com/sukses.dunia.akhirat

Reply
avatar

BERIKAN KOMENTAR TERBAIK ANDA

Catatan:
Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Dilarang memasukkan link aktif...!!! link aktif secara otomatis akan terhapus dari komentar.