Gambar bertukar apabila dilalukan cursor

Cuba lalukan cursor anda pada gambar di bawah. Apa terjadi? ya, gambar yang anda nampak sebelum itu bertukar kepada gambar lain. Menarik bukan? Trick ini boleh dilakukan sekiranya korang ingin menampakkan kelainan pada gambar-gambar dalam blog, sekaligus menarik perhatian orang untuk klik pada gambar itu (sekiranya disertakan link).

Ingin cuba? jom ikuti tutorial di bawah:

 1) Copy kod di bawah

<a href="Target link" target="_blank"><img onmouseout="this.src='URL gambar pertama'" onmouseover="this.src='URL gambar kedua'" src="URL gambar pertama" /></a>

2) Pada perkataan yang diboldkan dalam kod di atas, letakkan target link yang anda mahu, url untuk gambar pertama dan url gambar kedua. Kalau tak tahu cara nak dapatkan url gambar, ikuti tutorial di sini

Contoh kod (gambar demo di atas):

<a href="http://jombinabelog.blogspot.com/" target="_blank"><img onmouseout="this.src='http://i895.photobucket.com/albums/ac158/santaisini/094-3.png'" onmouseover="this.src='http://i895.photobucket.com/albums/ac158/santaisini/094-2.png'" src="http://i895.photobucket.com/albums/ac158/santaisini/094-3.png" /></a>

3) Post kod tersebut di dalam entry blog atau add pada sidebar.

4) Publish / save dan lihat hasilnya.

Selamat mencuba! :)