Tukar Gambar Apabila Dilakukan oleh 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.

Tutorial adalah seperti berikut.

1. Gunakan kod di bawah, tukarkan link yang anda mahu, url gambar pertama dan url gambar kedua.Nie untuk tab menu mcm saye ea...

<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

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHGkz-c0lLza1otmmwotP6ZMXpOl9pFyGOvI9ulhUsN5pgRHEv-xsN1cbhu48hqw0ugREVnxSqisHK1iS5RUKXfHRrYmBuRyd3CfPNlAtc3pIrVTH8bcKJIi1hYJ41Cym_c9PDTR1YeMIj/s1600/hover+sini.jpg" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjRHFYFJ4LJxdTqoyjt2asf2ycekLDsxIj0leDVN_JT3cdXlLa9SjJ5Qxa6zYO5ThGkYSRUsExRWuXTAfPQ2sNC7duEEnJ2mKg1PLkFMODWqaN8zPhbLk57gElBYJ5GmD1rwBP_5gqyMaV/s1600/akw+ofd.jpg'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHGkz-c0lLza1otmmwotP6ZMXpOl9pFyGOvI9ulhUsN5pgRHEv-xsN1cbhu48hqw0ugREVnxSqisHK1iS5RUKXfHRrYmBuRyd3CfPNlAtc3pIrVTH8bcKJIi1hYJ41Cym_c9PDTR1YeMIj/s1600/hover+sini.jpg'" />

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


Senang dan mudah bukan???


Nota kepala : 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....


Credit : Tutorial untuk Blog