หลังจากการสืบค้นรูปภาพแล้ว เรายังต้องเพิ่มฟังก์ชันเพื่อดูรูปภาพขนาดใหญ่ ดังนั้นเราจึงเขียนเมธอดใน js แล้วเรียกเมธอดนี้ในเหตุการณ์ onmouseover ของรูปภาพ ดังนั้นเมื่อเมาส์เลื่อนเมาส์ไปเหนือรูปภาพขนาดเล็ก รูปภาพขนาดใหญ่จะแสดงโดยอัตโนมัติ
รหัส js สำหรับการแสดงและซ่อนภาพขนาดใหญ่:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
//แสดงรูปภาพ
ฟังก์ชั่นมากกว่า (imgid, obj, imgbig)
-
//ขนาดสูงสุดที่แสดงในภาพขนาดใหญ่คือ 4 ถึง 3, 400 300
ความกว้างสูงสุด=400;
ความสูงสูงสุด=300;
//แสดง
obj.style.display = "";
imgbig.src=imgid.src;
//1. เกินทั้งความกว้างและความสูง ดูว่าใครเกินมากกว่า ให้กำหนดเป็นค่าสูงสุด ส่วนที่เหลือเป็นไปตาม 2 และ 3
//2. หากความกว้างเกินและความสูงไม่เกิน ให้ตั้งค่าความกว้างเป็นค่าสูงสุด
//3. หากความกว้างไม่เกินและความสูงเกิน ให้ตั้งค่าความสูงเป็นค่าสูงสุด
ถ้า(img.width>ความกว้างสูงสุด&&img.height>ความสูงสูงสุด)
-
pare=(img.width-maxwidth)-(img.height-maxheight);
ถ้า(แพร์>=0)
img.width=ความกว้างสูงสุด;
อื่น
img.height=ความสูงสูงสุด;
-
อย่างอื่นถ้า (img.width>maxwidth&&img.height<=maxheight)
-
img.width=ความกว้างสูงสุด;
-
อย่างอื่นถ้า (img.width<=maxwidth&&img.height>maxheight)
-
img.height=ความสูงสูงสุด;
-
-
//ซ่อนภาพ.
ฟังก์ชั่นออก()
-
document.getElementById('divImage').style.display="none";
-
</สคริปต์>
ภาพที่แสดงภาพเล็กและภาพที่แสดงภาพใหญ่:
คัดลอกรหัสรหัสดังต่อไปนี้:
<img id="img" src="ที่อยู่รูปภาพของคุณ" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" />
<%--พื้นที่ที่แสดงไอคอนขนาดใหญ่--%>
<div id="divImage" style="display: none; left: 120px;top:5px; Position: Absolute">
<img id="imgbig" src="~/Images/noImage.gif" />
</div>