Nachdem wir das Bild abgefragt haben, müssen wir auch eine Funktion zum Anzeigen des großen Bildes hinzufügen. Daher haben wir eine Methode in js geschrieben und diese Methode dann im Onmouseover-Ereignis des Bildes aufgerufen, sodass, wenn die Maus über das kleine Bild fährt, Das große Bild wird automatisch angezeigt.
js-Code zum Anzeigen und Ausblenden großer Bilder:
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
//Bilder anzeigen
Funktion over(imgid,obj,imgbig)
{
//Die maximale Größe, die im großen Bild angezeigt wird, beträgt 4 bis 3.400 300
maximale Breite=400;
maximale Höhe=300;
//zeigen
obj.style.display="";
imgbig.src=imgid.src;
//1. Sowohl die Breite als auch die Höhe werden überschritten. Derjenige, der sie stärker überschreitet, wird als Maximalwert festgelegt.
//2. Wenn die Breite größer und die Höhe nicht größer ist, stellen Sie die Breite auf den Maximalwert ein
//3. Wenn die Breite nicht größer ist und die Höhe größer ist, stellen Sie die Höhe auf den Maximalwert ein
if(img.width>maxwidth&&img.height>maxheight)
{
pare=(img.width-maxwidth)-(img.height-maxheight);
if(pare>=0)
img.width=maxwidth;
anders
img.height=maxheight;
}
sonst if(img.width>maxwidth&&img.height<=maxheight)
{
img.width=maxwidth;
}
sonst if(img.width<=maxwidth&&img.height>maxheight)
{
img.height=maxheight;
}
}
//Bild ausblenden
Funktion out()
{
document.getElementById('divImage').style.display="none";
}
</script>
Das Bild, das das kleine Bild anzeigt, und das Bild, das das große Bild anzeigt:
Kopieren Sie den Codecode wie folgt:
<img id="img" src="Ihre Bildadresse" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" />
<%--Bereich, in dem große Symbole angezeigt werden--%>
<div id="divImage" style="display: none; left: 120px;top:5px; position: absolute">
<img id="imgbig" src="~/Images/noImage.gif" />
</div>