Tukar Gambar Apabila Dilalukan Cursor

Memasang gambar yang boleh bertukar semasa dilalukan cursor di blog mungkin boleh menambah sedikit kelainan pada blog anda. Dan juga gambar yang disertakan dengan link boleh menarik sedikit perhatian.



Contohnya, cuba lalukan cursor anda pada gambar di bawah. (Dan juga boleh klik untuk ke blog ohbest)

Tutorial adalah seperti berikut.

1. Gunakan kod di bawah, tukarkan link yang anda mahu, url gambar pertama dan url gambar kedua.

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

Contoh untuk kod untuk demo di atas adalah

<a href="http://ohbest.blogspot.com" target="_blank"><img src="http://i.imgur.com/Z5B1M.png" onmouseover="this.src='http://i.imgur.com/PlE1J.jpg'" onmouseout="this.src='http://i.imgur.com/Z5B1M.png'" /></a>

2. Anda boleh post di dalam entri blog anda seperti biasa ataupun boleh letakkan di sidebar.


Senang dan mudah bukan.?.:)


Nota: Jika mahu gambar sahaja tanpa link, kodnya seperti dibawah.

<img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" />

Selamat mencuba.:)

Posted in: tutorial untuk blog