После запроса изображения нам также необходимо добавить функцию для просмотра большого изображения, поэтому мы написали метод на js, а затем вызвали этот метод в событии onmouseover изображения, чтобы при наведении курсора мыши на маленькое изображение, большое изображение будет отображаться автоматически.
js-код для отображения и скрытия больших изображений:
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
//Отображать картинки
функция over(imgid,obj,imgbig)
{
//Максимальный размер, отображаемый на большом изображении, составляет от 4 до 3 400 300
максимальная ширина = 400;
максимальная высота = 300;
//показывать
obj.style.display="";
imgbig.src=imgid.src;
//1. Превышена и ширина, и высота. Посмотрите, кто превышает ее больше, будет установлено максимальное значение. Остальные стратегии по 2 и 3.
//2 Если ширина превышает, а высота не превышает, устанавливаем максимальное значение ширины.
//3 Если ширина не превышает, а высота превышает, устанавливаем высоту на максимальное значение.
if(img.width>maxwidth&&img.height>maxheight)
{
pare=(img.width-maxwidth)-(img.height-maxheight);
если (паре>= 0)
img.width = максимальная ширина;
еще
img.height = максимальная высота;
}
иначе if(img.width>maxwidth&&img.height<=maxheight)
{
img.width = максимальная ширина;
}
иначе if(img.width<=maxwidth&&img.height>maxheight)
{
img.height = максимальная высота;
}
}
//скрываем картинку
функция out()
{
document.getElementById('divImage').style.display="none";
}
</скрипт>
Изображение, отображающее маленькое изображение, и изображение, отображающее большое изображение:
Скопируйте код кода следующим образом:
<img id="img" src="Адрес вашего изображения" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" />
<%--область отображения больших значков--%>
<div id="divImage" style="display: none; слева: 120 пикселей; сверху: 5 пикселей; позиция: абсолютная">
<img id="imgbig" src="~/Images/noImage.gif" />
</div>