实现根据后台绑定小图片，鼠标移至小图，自动显示相应大图
.Net精简版本
<scriptlanguage="JavaScript">
functionGetShowImg(imgfile)
{
document.all("ShowImage").src="/semir/images/"+imgfile;
}
</script>
//DataList绑定
<asp:datalistid="DlSides"runat="server"OnItemCommand="DlSides_ItemCommand"RepeatDirection="Horizontal"
RepeatColumns="3"DataKeyField="SideID"CssClass="semirText">
<ItemTemplate>
<aonmouseover="GetShowImg('<%#DataBinder.Eval(Container.DataItem,"sidePath")%>')"><IMGstyle="WIDTH:45px;HEIGHT:56px"alt=""src='/semir/images/small<%#DataBinder.Eval(Container.DataItem,"sidePath")%>'border=0></a>
</ItemTemplate>
</asp:datalist>
//显示相应大图
<imgname="ShowImage">
ASP完整版
<scriptlanguage="JavaScript">
functionImagePreload()
{
varargs=ImagePreload.arguments;
document.ImgPreArray=newArray(args.length);
for(vari=0;i<args.length;i++)
{
document.ImgPreArray[i]=newImage;
document.ImgPreArray[i].src="admin/upfile/newbook/"+args[i];
}
}
functionfitSize(){
vara,b;
varimgobj=document.all("ShowImage");
varoldimg=newImage();
oldimg.src=imgobj.src;
vardw=oldimg.width;
vardh=oldimg.height;
if(imgobj==null){
setTimeout("fitSize()",50);
return;
}
if(imgobj.offsetWidth==0){
setTimeout("fitSize()",50);
return;
}
varmaxW=300;
varmaxH=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;
}
}
functionGetShowImg(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();'showpicturesize
}
functionShowTextDetail(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>
<scriptlanguage="JavaScript"for="window"event="onload">
ImagePreload('<%=rs("picture")%>');
</script>
'---------调用-显示-------
<%ifrs("picture")<>""then%>
<astyle="cursor:hand">
<imgname="ShowImage"src="admin/upfile/newbook/<%=rs("picture")%>"border="0"width="267"height="267">
<>
</a><spanid="ShowImgText"style="font-weight:bold;"></span>
<%endif%>
‘--------------鼠标移过的图片------
<%ifrs("picture")<>""then%>
<aonmouseover="GetShowImg('','<%=rs("picture")%>');">
<imgname="Image71"src="admin/upfile/newbook/<%=rs("picture")%>"alt="dogo"width="40"height="30"border="0"></a>
<%endif%>
【asp.net下用js实现鼠标移至小图，自动显示相应大图】相关文章：
★ 在asp.net下实现Option条目中填充前导空格的方法