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

实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图 

.Net精简版本 

     
   function GetShowImg(imgfile)  
   { 
    document.all("ShowImage").src = "/semir/images/"+ imgfile; 

   }       
    
 //DataList绑定 
       RepeatColumns="3" DataKeyField="SideID" CssClass="semirText">       
       
       ')">' border=0 > 
                
 
      


// 显示相应大图 
  

ASP完整版 

 
    function ImagePreload()  
    {  
    var args = ImagePreload.arguments; 
    document.ImgPreArray = new Array(args.length); 
    for(var i=0; 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"; 
      } 
     } 
       
       
     ImagePreload('<%=rs("picture")%>'); 
       
'---------调用-显示------- 
 <%if rs("picture")<>"" then %> 
                          
                        " border="0" width="267" height="267">  
       
                           
                        <% end if %> 
‘--------------鼠标移过的图片------ 
 <% if rs("picture")<>"" then%> 
         ');">  
                              " alt="dogo" width="40" height="30" border="0">  
                              <%end if%> 

你可能感兴趣的:(asp.net下用js实现鼠标移至小图,自动显示相应大图)