Membuat imej bertukar apabila penunjuk tetikus berada di atasnya (on mouseover)




Halakan penunjuk tetikus ke atas imej ini dan lihat perubahan.

Sebenarnya ia adalah dua kode imej dalam satu skrip. Untuk menghasilkannya, masukkan url imej ke dalam skrip ini,

<SCRIPT LANGUAGE="JavaScript">
<!-- JS bermula
loadImage1 = new Image();
loadImage1.src = "url imej yang akan dipaparkan hanya bila penunjuk tetikus berada di atasnya";
staticImage1 = new Image();
staticImage1.src = "url imej yang mahu dipaparkan";
// JS tamat -->
</script>
<span onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="url imej yang mahu dipaparkan" border=0></span>

Copy/paste skrip dan sesuaikan di posting-edit html blog anda.

Contoh,
(skrip imej contoh di atas)

<SCRIPT LANGUAGE="JavaScript">
<!-- JS bermula
loadImage1 = new Image();
loadImage1.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8uZr-g0ayN8kZKNRAhHhifgn5zYKyHYKtwLVQMcre4kTb1t0FNpPXjlK-ZXe5gcJgk-gfuYPTvRl86RPTOzEwoU4B2DHWNdGBb2j3q1JU5KdTrxgyVjkWB2-8_lPfaKNBLgBboxUbP8/s320/mr+bean-mona+lisa.jpg";
staticImage1 = new Image();
staticImage1.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPo7erq-4YSPj5PAW3LnIoa1lRVYSQmmarO3aRvlkPn9MA3Mlj3lsbDKYM4NI_QteqS2xHACxkwDJcf4rA5HletM2NbO790e_f8qcRT97sO6OR8AvhcbfhwpMeS_qac5ezHpwcwc0aEvw/s320/rmona+lisa.jpg";
// JS tamat -->
</script>
<span onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPo7erq-4YSPj5PAW3LnIoa1lRVYSQmmarO3aRvlkPn9MA3Mlj3lsbDKYM4NI_QteqS2xHACxkwDJcf4rA5HletM2NbO790e_f8qcRT97sO6OR8AvhcbfhwpMeS_qac5ezHpwcwc0aEvw/s320/rmona+lisa.jpg" border=0></span>

Perhatian: Hanya satu skrip ini boleh diletakkan di satu post blog.

Ulasan