繁體中文当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > asp.net下用js实现鼠标移至小图，自动显示相应大图
- ASP.NET
- blog程序新版本V2.0 Beta完成,提供V1.0全部源码下载
- “/”应用程序中的服务器错误
- asp.net(c#)复数类(复数加减乘除四则运算)
- asp.net(c#)不可访问，因为它受保护级别限制
- asp.net(c#) 水仙花数
- ASP.NET实现用图片进度条显示投票结果
- asp.net(c#) MS AJAX的安装
- asp.net(c#)有关 Session 操作的几个误区
- ASP.net基础知识之常见错误分析
- [.net] 操纵自如-页面内的配合与通信
- c# static的全部用法收集整理
- 使CheckBoxList的Attributes属性生效（修改微软的一个bug）
- 在ASP.NET中使用Session常见问题集锦
- [原创]完美解决Could not load file or assembly ''AjaxPro.2'' or one of its dependencies. 拒绝访问。
- 在Apache环境下成功的运行ASP.NET的注意事项
- ClickOnce DIY全自动更新下载升级的自我实现
- asp.net jscript 一句话木马
- 在ASP.Net中实现flv视频转换的代码
- 将DataTable中的一行复制到另一个DataTable的方法
- 在DataTable中执行Select("条件")后，返回DataTable的方法
ASP.NET 中的 asp.net下用js实现鼠标移至小图，自动显示相应大图
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-13 浏览: 52 ::
收藏到网摘: n/a
实现根据后台绑定小图片，鼠标移至小图，自动显示相应大图
.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%>
评论 (0) All
