欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-10-12 19:24:57
实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图  .net精简版本 
实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图 

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