asp.net下用js實現滑鼠移至小圖，自動顯示相應大圖

實現根據後台綁定小圖片，滑鼠移至小圖，自動顯示相應大圖

.Net精簡版本

<script language="JavaScript">

function GetShowImg(imgfile)

{

document.all("ShowImage").src = "/semir/images/"+ imgfile;

}

</script>

//DataList綁定

<asp:datalist id="DlSides" runat="server" OnItemCommand="DlSides_ItemCommand" RepeatDirection="Horizontal"

RepeatColumns="3" DataKeyField="SideID" CssClass="semirText">

<ItemTemplate>

<a onmouseover="GetShowImg('<%# DataBinder.Eval(Container.DataItem, "sidePath")%>')"><IMG style="WIDTH: 45px; HEIGHT: 56px" alt="" src='/semir/images/small<%# DataBinder.Eval(Container.DataItem, "sidePath")%>' border=0 ></a>

</ItemTemplate>

</asp:datalist>

// 顯示相應大圖

<img name="ShowImage">

ASP完整版

<script language="JavaScript">

function ImagePreload()

{

var args = ImagePreload.arguments;

document.ImgPreArray = new Array(args.length);

for(var i=0; i<args.length; i++)

{

document.ImgPreArray[i] = new Image;

document.ImgPreArray[i].src = "admin/upfile/newbook/"+ args[i];

}

}

function fitSize() {

var a, b;

var imgobj = document.all("ShowImage");

var oldimg = new Image();

oldimg.src = imgobj.src;

var dw = oldimg.width;

var dh = oldimg.height;

if(imgobj == null) {

setTimeout("fitSize()", 50);

return;

}

if(imgobj.offsetWidth == 0) {

setTimeout("fitSize()", 50);

return;

}

var maxW = 300;

var maxH = 270;

if(dw>maxW || dh>maxH) {

a = dw/maxW;

b = dh/maxW;

if(b>a) a=b;

dw = dw/a;

dh = dh/a;

}

if(dw > 0 && dh > 0) {

imgobj.width = dw;

imgobj.height = dh;

}

}

function GetShowImg(imgtext, imgfile) {

document.all("ShowImgText").innerHTML = imgtext;

document.all("ShowImage").src = "admin/upfile/newbook/"+ imgfile;

document.all("ShowImage").width = 267;

document.all("ShowImage").height = 267;

//fitSize();'show picture size

}

function ShowTextDetail(n) {

for (i=1; i<5; i++) {

document.all("TextDetail"+i).style.display = "none";

}

document.all("TextDetail"+n).style.display = "";

for (i=1; i<4; i++) {

document.all("TitleDetail"+i).className = "shopTabOff";

}

if (n < 4) {

document.all("TitleDetail"+n).className = "shopTabOn";

}

}

</script>

<script language="JavaScript" for="window" event="onload">

ImagePreload('<%=rs("picture")%>');

</script>

'---------調用-顯示-------

<%if rs("picture")<>"" then %>

<a style="cursor:hand">

<img name="ShowImage" src="admin/upfile/newbook/<%=rs("picture")%>" border="0" width="267" height="267">

<!-- <img name="ShowImage" src="../upimages/F_060524_000613_46398.jpg" border=0 onload="fitSize();"> -->

</a> <span id="ShowImgText" style="font-weight: bold;"></span>

<% end if %>

‘--------------滑鼠移過的圖片------

<% if rs("picture")<>"" then%>

<a onmouseover="GetShowImg('','<%=rs("picture")%>');">

<img name="Image71" src="admin/upfile/newbook/<%=rs("picture")%>" alt="dogo" width="40" height="30" border="0"></a>

<%end if%>