Depois de consultar a imagem, também precisamos adicionar uma função para visualizar a imagem grande, então escrevemos um método em js e depois chamamos esse método no evento onmouseover da imagem, para que quando o mouse passar sobre a imagem pequena, a imagem grande será exibida automaticamente.
Código js para exibir e ocultar imagens grandes:
Copie o código do código da seguinte forma:
<script type="texto/javascript">
//Mostrar fotos
função terminada(imgid,obj,imgbig)
{
//O tamanho máximo exibido na imagem grande é 4 a 3.400.300
largura máxima=400;
altura máxima=300;
//mostrar
obj.style.display="";
imgbig.src=imgid.src;
//1. A largura e a altura são ultrapassadas. Veja quem excede mais. Se exceder mais, defina-o como o valor máximo.
//2. Se a largura exceder e a altura não exceder, defina a largura para o valor máximo
//3. Se a largura não exceder e a altura exceder, defina a altura para o valor máximo
if(img.width>maxwidth&&img.height>maxheight)
{
pare=(img.width-maxwidth)-(img.height-maxheight);
se(pare>=0)
img.largura=largura máxima;
outro
img.altura=altura máxima;
}
senão if(img.width>maxwidth&&img.height<=maxheight)
{
img.largura=largura máxima;
}
senão if(img.width<=maxwidth&&img.height>maxheight)
{
img.altura=altura máxima;
}
}
//oculta a imagem
função fora()
{
document.getElementById('divImage').style.display="none";
}
</script>
A imagem que exibe a imagem pequena e a imagem que exibe a imagem grande:
Copie o código do código da seguinte forma:
<img id="img" src="Endereço da sua imagem" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" />
<%--área onde ícones grandes são exibidos--%>
<div id="divImage" style="display: none; left: 120px;top:5px; posição: absoluto">
<img id="imgbig" src="~/Images/noImage.gif" />
</div>