Después de consultar la imagen, también necesitamos agregar una función para ver la imagen grande, por lo que escribimos un método en js y luego llamamos a este método en el evento onmouseover de la imagen, de modo que cuando el mouse pasa sobre la imagen pequeña, la imagen grande se mostrará automáticamente.
Código js para mostrar y ocultar imágenes grandes:
Copie el código de código de la siguiente manera:
<tipo de script="texto/javascript">
//Mostrar imágenes
función sobre(imgid,obj,imgbig)
{
//El tamaño máximo mostrado en la imagen grande es de 4 a 3, 400 300
ancho máximo = 400;
altura máxima=300;
//espectáculo
obj.style.display="";
imgbig.src=imgid.src;
//1.Se supera el ancho y el alto. Mira quién lo supera más. El que lo supera más se pondrá como valor máximo. El resto de estrategias son según 2 y 3.
// 2. Si el ancho excede y la altura no excede, establezca el ancho al valor máximo
// 3. Si el ancho no excede y la altura excede, establezca la altura al valor máximo
if(img.ancho>ancho máximo&&img.alto>alto máximo)
{
pare=(img.width-maxwidth)-(img.height-maxheight);
si(pare>=0)
img.width=ancho máximo;
demás
img.height=altura máxima;
}
de lo contrario si (img.width>maxwidth&&img.height<=maxheight)
{
img.width=ancho máximo;
}
de lo contrario si (img.ancho<=anchomax&&img.alto>alturamax)
{
img.height=altura máxima;
}
}
//ocultar imagen
funcionar()
{
document.getElementById('divImage').style.display="none";
}
</script>
La imagen que muestra la imagen pequeña y la imagen que muestra la imagen grande:
Copie el código de código de la siguiente manera:
<img id="img" src="La dirección de tu imagen" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" />
<%--área donde se muestran iconos grandes--%>
<div id="divImage" style="pantalla: ninguna; izquierda: 120px;arriba:5px; posición: absoluta">
<img id="imgbig" src="~/Images/noImage.gif" />
</div>