| Cara menggunakan
JavaScript untuk mengubah gambar apabila tetikus berada di atasnya Pertama sekali anda
haruslah mengenal pasti jenis browser yang digunakan oleh pengunjung. Anda haruslah
menggunakan JavaScript di bawah. Ini perlu kerana Internet Explorer 3.0 tidak menyokong
penggunaan pertukaran imej ini. Hanya Netscape Navigator 3.0, Navigator 4.0, dan Internet
Explorer 4.0 dan ke atas sahaja menyokong penggunaan pertukaran imej ini.
-------------------------------------------------------------------------------------------
<script language="javascript">
<!--
// mengenalpasti versi browser
var BV = parseInt(navigator.appVersion);
// mengenalpasti nama browser
var BN = "";
if (navigator.appName.indexOf("Microsoft") >= 0) {BN = "e";}
else {
if (navigator.appName.indexOf("Netscape") >= 0) {BN = "n";}
else {BN = "g"}
}
// untuk menentukan bahawa browser
// boleh menyokong penggunakan pertukaran imej ini
// jika disokong maka pembolehubah BI
// akan mempunyai nilai 1 jika tidak, ia akan mempunyai nilai 0
var BI = "";
if (BV >= 4)
{BI = 1;}
else {
if (BN == "n" && BV >= 3)
{BI = 1;}
else
{BI = 0;}
}
function img_cool(imgName) {}
function img_hot(imgName) {}
//--></script>
-----------------------------------------------------------------------------------
Kedua, anda
perlu menyediakan Imej kedua untuk imej asal. Sebagai contoh namakan imej asal sebagai imej1a.gif
dan namakan imej kedua sebagai imej1b.gif. Selepas ini anda diperlukan
untuk memasukkan imej1b.gif ke dalam memori komputer.
-----------------------------------------------------------------------------------
<script language="Javascript">
<!--
// untuk memasukkan imej1b.gif ke dalam memori komputer
if (BI >= 1)
{
imej1 = new Image; imej1.src = "imej1b.gif";
// Jika anda mahu menambah imej lagi anda boleh menambah
// kod-kod seperti di baris di atas tetapi pastikan namanya lain.
// cth
// imej2 = new Image; imej2.src= "imej2b.gif"
// imej3 = new Image; imej3.src= "imej3b.gif"
// ... dan seterusnya
}
//--></script>
-----------------------------------------------------------------------------------
Ketiga, anda
perlu sediakan 2 rutin, untuk menukar imej asal ke imej kedua (semasa tetikus berada di
atas imej) dan imej kedua ke imej asal (apabila tetikus tidak lagi berada di atas imej).
-----------------------------------------------------------------------------------
<script language="javascript">
<!--
// jika tetikus berada di atas imej
function img_hot (imgName) {
if (BI >= 1)
{
document [imgName].src = imgName+"a.gif"
}
}
// jika tetikus keluar dari kawasan imej
function img_cool (imgName) {
if (BI >= 1)
{
document [imgName].src = imgName+"b.gif"
}
}
//--></script>
-----------------------------------------------------------------------------------
Selepas itu
pada tag imej anda, anda namakan imej tersebut sebagai imej1.
Perhatikan nama imej1 telah juga digunakan pada kod JAVAScript ke 2.
Sifat onmouseover="img_hot('imej1')" berfungsi untuk memanggil rutin img_hot() apabila
tetikus berada di atas imej. Sifat onmouseout="img_cool('imej1')" pula berfungsi untuk memanggil rutin img_cool() apabila
tetikus berada di luar imej semula. Jika anda tidak memasukkan sifat onmouseout ini, kesannya jika tetikus telah berada di luar kawasan imej, imej itu tidak
akan berubah kepada imej asal.
-----------------------------------------------------------------------------------
<a href="laman.htm" onmouseover="img_hot('imej1')" onmouseout="img_cool('imej1')">
<img src="imej1a.gif" border="0" name="imej1"></a>
-----------------------------------------------------------------------------------
Klik di
sini untuk melihat contoh penggunaan JAVAScipt di atas. |