بعد الاستعلام عن الصورة، نحتاج أيضًا إلى إضافة وظيفة لعرض الصورة الكبيرة، لذلك كتبنا طريقة في js، ثم استدعينا هذه الطريقة في حدث onmouseover للصورة، بحيث عندما يمرر الماوس فوق الصورة الصغيرة، سيتم عرض الصورة الكبيرة تلقائيًا.
رمز JS لعرض وإخفاء الصور الكبيرة:
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
// عرض الصور
الدالة على (imgid،obj،imgbig)
{
// الحد الأقصى للحجم المعروض في الصورة الكبيرة هو 4 إلى 3، 400 300
أقصى عرض=400;
أقصى ارتفاع=300;
//يعرض
obj.style.display="";
imgbig.src=imgid.src;
//1. تم تجاوز العرض والارتفاع. معرفة من يتجاوزه أكثر، قم بتعيينه كقيمة قصوى.
//2. إذا تجاوز العرض ولم يتجاوز الارتفاع، فاضبط العرض على القيمة القصوى
//3. إذا لم يتجاوز العرض والارتفاع، فاضبط الارتفاع على القيمة القصوى
إذا (img.width>maxwidth&&img.height>maxheight)
{
pare=(img.width-maxwidth)-(img.height-maxheight);
إذا (المستوى> = 0)
img.width=maxwidth;
آخر
img.height=maxheight;
}
وإلا إذا (img.width>maxwidth&&img.height<=maxheight)
{
img.width=maxwidth;
}
وإلا إذا (img.width<=maxwidth&&img.height>maxheight)
{
img.height=maxheight;
}
}
//إخفاء الصورة
وظيفة خارج ()
{
document.getElementById('divImage').style.display="none";
}
</script>
الصورة التي تعرض الصورة الصغيرة والصورة التي تعرض الصورة الكبيرة:
انسخ رمز الكود كما يلي:
<img id="img" src="عنوان صورتك" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" />
<%--المنطقة التي يتم فيها عرض الرموز الكبيرة--%>
<div id="divImage" style="display: none; left: 120px;top:5px; الموضع: مطلق">
<img id="imgbig" src="~/Images/noImage.gif" />
</div>