Membuat mouseover button effect yang cantik

Artikel ini telah dibaca 3170 kali.

Untuk memperindah tampilan blog, salah satu caranya adalah dengan menggantikan text link menjadi image link. Text link adalah teks yang diberi link ke alamat tertentu. Sedangkan image link adalah gambar yang diberi link ke alamat tertentu.

Saya pernah membaca sebuah blog seorang master dari Amrik sana bahwa image link akan meningkatkan jumlah klik dibandingkan dengan text link. Mengapa? Karena image yang menarik akan merangsang visitor untuk melakukan klik.

Nah, si image link ini masih bisa kita modif menjadi lebih cantik sekaligus lebih informatif dengan membuat mouseover button effect. Maksudnya gimana? Coba arahkan kursor mouse Anda ke gambar berikut ini!

Itulah yang disebut mouseover button effect. Jika Anda mengarahkan kursor ke atas suatu image link, maka tampilan image akan berubah, bisa titel yang berubah warna, image mengecil, image membesar, atau efek lain bergantung pada kreativitas sang pembuat.

Selain mempercantik tampilan, efek seperti ini akan memberitahu pengunjung secara atraktif bahwa ini adalah sebuah link.

Cara membuat mouseover button effect yang cantik

Untuk bisa membuat efek seperti ini Anda harus instal dulu sebuah plugin namanya Image Mouseover yang bisa didownload di sini. Setelah menginstal plugin tersebut, sekarang Anda bisa membuat image button menggunakan Corel atau Photoshop, dan simpanlah dengan format png, jangan jpg. Mengenai bentuk image button dan titlenya terserah kreatifitas Anda. Bisa dirancang untuk tampilan image berganti, image sedikit membesar, atau warna title text yang berubah. Semua bergantung pada selera dan kreatifitas Anda. Jika bingung cara membuat button seperti di atas, nanti saya akan buatkan tutorial singkatnya.

Oke, saya anggap Anda sudah memiliki dua image, misalnya seperti contoh yang saya buat di atas. Image1 adalah image statis yang selalu tampak, dan Image2 adalah image muncul saat kursor di arahkan ke Image1 (mouseover). Image1 tersebut berukuran lebih kecil, selisih sekitar 5 px dibandingkan dengan Image2. Jadi saat kursor diarahkan ke Image1 maka Image1 akan berubah menjadi Image2.

Jika Anda menginginkan yang berubah adalah warna teksnya, ya buatlah dua image yang sama persis, hanya berbeda warna teksnya saja. Jadi ketika terjadi mouse over, ukuran gambar tetap tetapi warna teks berubah.

Sekarang perhatikan kode berikut ini:

<a title="Contact Person" href="link alamat yang ingin dibuka"><img class="mouseover" alt="" src="link alamat Image1" oversrc="link alamat Image2" /></a>

Itu adalah kode image mouseover yang bisa Anda tempatkan pada sidebar atau dimana pun.

Kalau ingin tahu contoh fix yang telah saya buat bisa dilihat di sini.

Selamat berkreasi!

Banyak yang mencari:

Tags: efek gambar efek image image button mouseover mouseover button mouseover effect

author
Dosso Sang Isahi adalah mantan guru, sekarang berprofesi sebagai networker. Saat ini mengelola beberapa bisnis online, juga aktif dalam bidang sosial media marketing. Pria yang senang belajar hal yang berbau teknis dan IT ini bersama keluarga kecilnya tinggal di Sidoarjo, sedang menikmati kebebasan karier yang telah dicapainya.

Related Post "Membuat mouseover button effect yang cantik"

Cara backup Windows Live Writer
Selama karier online, Windows Live Writer selalu
Cara backup driver yang sudah terinstal
Cara backup driver yang sudah terinstal Beberapa
Cara membuat installer Windows 8 dengan USB Flashdisk
Saya pernah menulis cara membuat Flashdisk Installer
Gunakan software Indexer agar website gampang terindeks oleh Google
Indexing halaman website kita di mesin pencari