Tutorial : Cara Buat Effect Gambar Mouse Rollover.

Tutorial Time !

Wow ! Menarik sungguh Effect Mouse Rollover ni, seriously korang kena cuba ni. Hari ini aku nak ajar korang buat Effect Mouse Rollover pada gambar = ) 

Apa dia Effect Mouse Rollover ?


Sama macam effect hover link dimana setiap kali korang scroll mouse pada gambar, gambar akan menunjukkan effect lain. So, lebih banyak kejutan pada gambar korang. Sesuai kalau korang nak buat banner yang comel menggunakan Effect Mouse Rollover ni !

Cuba scroll mouse kat gambar mamat hensem bawah ni = )

Comel kan ?

Jom ikut aku belajar buat Mouse Rollover Effect = )

*****

Langkah 1
Cara Buat Image Rollover :

• Edit >> 2 image yang berlainan samaada di Paint, Photoscape, Adobe mengikut citarasa korang.

• Publish >> gambar yang telah siap edit di photobucket atau imageshack atau lebih senang lagi publish gambar blogphoto (maksud blogphoto ni ialah blog lain dibina khas untuk gambar sahaja). Ini bertujuan untuk mendapatkan Url Image / Image link location.

• Go to >> Page Element 
• Click >> Add a gadget
• Pilih Html / Javascript
• Type kod pertama, contoh macam gambar di bawah ni : 

• Save.

 *****

Langkah 2
Cara Buat Image Rollover :

• Go to >> New Post
• Type kod kedua, contoh macam dalam gambar bawah ni :

• Edit Link Tujuan Jika Gambar Diklik : Gantikan dengan Link Url yang korang nak letak. Bila orang click gambar ni akan terus pergi ke link ini.
• Edit Url Gambar 1 : Gantikan perkataan ni dengan Url Image yang pertama korangdapat dari photobucket @ imagechack @ blogphoto tadi.
• Edit Url Gambar 2 : Gantikan perkataan ni dengan Url Image yang kedua korangdapat dari photobucket @ imagechack @ blogphoto tadi. 

• Contoh cara nak copy Url Image di Blogphoto :  Right click >> Copy Image Location

• Pastikan kod anda nampak seperti ini setelah Url Image diletak : 

• Click >> Preview
• Click >> Publish
• Siap !

Credit : Prasutan

P/s : Sorry, aku tak tahu macamana nak Encode Css, sebab tu ada gambar je dan takde kod untuk korang copy paste. Kalau korang nak ambil kod terus boleh click pada link Prasutan yang aku credit kan ni. Ok ? Pada yang tahu camna nak Encode Css untuk publish di entry, sila beri tunjuk ajar.

Selamat Maju Jaya !