画像をクエリした後、大きな画像を表示する関数も追加する必要があるため、js でメソッドを記述し、画像の onmouseover イベントでこのメソッドを呼び出します。これにより、マウスが小さな画像の上に移動したときに、大きな画像が自動的に表示されます。
大きな画像を表示および非表示にするための js コード:
次のようにコードをコピーします。
<script type="text/javascript">
//画像を表示する
関数オーバー(imgid,obj,imgbig)
{
//大きな画像で表示される最大サイズは 4 ～ 3、400 300 です
最大幅=400;
最大高さ=300;
//見せる
obj.style.display="";
imgbig.src=imgid.src;
//1. 幅と高さの両方を超えている方を見て、それを超えている方を最大値として設定します。
//2. 幅が超過し、高さが超過しない場合は、幅を最大値に設定します。
//3. 幅が超えず、高さが超える場合は、高さを最大値に設定します。
if(img.width>maxwidth&&img.height>maxheight)
{
pare=(img.width-maxwidth)-(img.height-maxheight);
if(パレ>=0)
img.width=最大幅;
それ以外
img.height=最大高さ;
}
else if(img.width>maxwidth&&img.height<=maxheight)
{
img.width=最大幅;
}
else if(img.width<=maxwidth&&img.height>maxheight)
{
img.height=最大高さ;
}
}
//画像を非表示にする
関数out()
{
document.getElementById('divImage').style.display="none";
}
</script>
小さい画像を表示する画像と大きい画像を表示する画像:
次のようにコードをコピーします。
<img id="img" src="画像アドレス" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" />
<%--大きなアイコンが表示される領域--%>
<div id="divImage" style="表示: なし; 左: 120px; トップ: 5px; 位置: 絶対">
<img id="imgbig" src="~/Images/noImage.gif" />
</div>