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%>