13/05/13

Cara Paling Mudah Membuat Mouse Over Button Pada Gambar

  Firman Santosa       13/05/13
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.
logoblog

Thanks for reading Cara Paling Mudah Membuat Mouse Over Button Pada Gambar

Previous
« Prev Post

23 komentar:

  1. Cara Paling Mudah Membuat Mouse Over Button Pada Gambar

    BalasHapus
  2. keren banget bang.. i love this

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

    follow back + Koment back
    www.edisukarman.com

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

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

    BalasHapus
    Balasan
    1. Terimakasih kang atas kunjungannya... ;)

      Hapus
  5. terima kasih ya kk atas informasinya

    BalasHapus
  6. Thanks banget gan ,, sangat membantu.. :D

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

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

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

    BalasHapus
    Balasan
    1. Iya mas..... semoga berhasil aja mas... :D

      Hapus
  10. boleh minta contack a bg watsapp, BBm atau apa gitu

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

      Hapus