Blog FarisQ: Tutorial : Cara Buat Effect Gambar Mouse Rollover .

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.