asp.net下用js实现鼠标移至小图,自动显示相应大图

所属分类: 网络编程 / ASP.NET 阅读数: 357
收藏 0 赞 0 分享
实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图 

.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%> 
更多精彩内容其他人还在看

解析WPF实现音频文件循环顺序播放的解决方法

本篇文章是对WPF实现音频文件循环顺序播放的方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

解决.net framework 4.0环境下遇到版本不同编译不通过的方法详解

本篇文章是对.net framework 4.0环境下遇到版本不同编译不通过的解决方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

将文件上传、下载(以二进制流保存到数据库)实现代码

将文件以二进制流的格式写入数据库:首先获得文件路径,然后将文件以二进制读出保存在一个二进制数组中具体请祥看本文,希望对你有所帮助
收藏 0 赞 0 分享

点击提交按钮后DropDownList的值变为默认值实现分析

在点击提交按钮后,页面上所有的绑定到数据库的控件值都恢复到默认值,下面与大家分享下DropDownList的值变为默认值
收藏 0 赞 0 分享

ASP.NET web.config中数据库连接字符串connectionStrings节的配置方法

ASP.NET web.config中数据库连接字符串connectionStrings节的配置方法,需要的朋友可以参考一下
收藏 0 赞 0 分享

Linkbutton控件在项目中的简单应用

Button控件可分为button控件、LinkButton控件、ImageButton控件三类,而LinkButton控件则在页面上显示为一个超级链接,下面与大家分享下其具体应用
收藏 0 赞 0 分享

Web.config 和 App.config 的区别分析

Web.config 和 App.config 的区别分析,需要的朋友可以参考一下
收藏 0 赞 0 分享

基于.Net中的数字与日期格式化规则助记词的使用详解

本篇文章是对.Net中的数字与日期格式化规则助记词的使用进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

解决在Web.config或App.config中添加自定义配置的方法详解

本篇文章是对在Web.config或App.config中添加自定义配置的方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

深入本机影像生成器(Ngen.exe)工具使用方法详解

本篇文章是对本机影像生成器(Ngen.exe)工具使用方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享
查看更多