Setelah menanyakan gambar, kita juga perlu menambahkan fungsi untuk melihat gambar besar, jadi kita menulis metode di js, dan kemudian memanggil metode ini dalam acara onmouseover gambar tersebut, sehingga ketika mouse mengarahkan mouse ke gambar kecil, gambar besar akan ditampilkan secara otomatis.
kode js untuk menampilkan dan menyembunyikan gambar besar:
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
//Menampilkan gambar
fungsi berakhir(imgid,obj,imgbig)
{
//Ukuran maksimum yang ditampilkan pada gambar besar adalah 4 hingga 3, 400 300
lebar maksimal=400;
tinggi maksimal=300;
//menunjukkan
obj.gaya.display="";
imgbig.src=imgid.src;
//1. Lebar dan tinggi keduanya terlampaui. Lihat siapa yang lebih besar. Jika lebih besar, tetapkan sebagai nilai maksimum.
//2. Jika lebarnya melebihi dan tingginya tidak melebihi, atur lebar ke nilai maksimum
//3. Jika lebarnya tidak melebihi dan tingginya melebihi, atur tingginya ke nilai maksimum
if(img.lebar>lebar maksimal&&img.tinggi>tinggi maksimal)
{
pare=(img.lebar-makslebar)-(img.tinggi-makstinggi);
jika(pare>=0)
img.lebar=lebar maksimal;
kalau tidak
img.tinggi=tinggi maksimal;
}
else if(img.width>maxwidth&&img.height<=maxheight)
{
img.lebar=lebar maksimal;
}
else if(img.lebar<=maxwidth&&img.height>maxheight)
{
img.tinggi=tinggi maksimal;
}
}
//sembunyikan gambar
fungsi keluar()
{
document.getElementById('divImage').style.display="tidak ada";
}
</skrip>
Gambar yang menampilkan gambar kecil dan gambar yang menampilkan gambar besar:
Copy kode kodenya sebagai berikut:
<img id="img" src="Alamat gambar Anda" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" />
<%--area di mana ikon besar ditampilkan--%>
<div id="divImage" style="display: tidak ada; kiri: 120px;atas:5px; posisi: absolut">
<img id="imgbig" src="~/Images/noImage.gif" />
</div>