2014-09-04 2 views
0

Я хотел бы увеличить изображение в виде сетки, пока мышь. Но в скрипте не разрешено писать onmouse, onclick или что-то еще. Можете ли вы помочь?Как увеличить изображение в режиме сетки при наведении мыши?

Мой сценарий:

<ItemTemplate> 
     <asp:Image ID="img" runat="server" ImageUrl='<%#Eval("IMAGE")%>' Height="50" Width="50" Style="cursor:pointer" /> 
     </ItemTemplate> 
     <EditItemTemplate> 
     <asp:Image ID="img" runat="server" ImageUrl='<%#Eval("IMAGE")%>' Height="50" Width="50" /> 
     </EditItemTemplate> 
     </asp:TemplateField> 

ответ

0

OnMouseOver является событий JavaScript. Вам нужно просто добавить атрибут «onmouseover» в желаемый asp: Image, поместить туда javascript-метод, и этот метод должен поместить ссылку на большое изображение на какой-то скрытый div и сделать этот div видимым.

+0

привет, я не понимаю, как я должен это делать .. im using C# –

0

n C# его недоступно. для этого вам нужно использовать jQuery. JQuery такой же, как javascript. Плагины предназначены для увеличения изображения. Вы можете использовать плагин jQuery magnifire.

Вот код

В HTML -

<div class="magnify"> 

<!-- This is the magnifying glass which will contain the original/large version --> 
    <div class="large"></div> 
    <asp:Image ID="img" runat="server" ImageUrl='<%#Eval("IMAGE")%>' class="small" Height="50" Width="50" Style="cursor:pointer" /> 

JQuery - Код

$(document).ready(function(){ 

    var native_width = 0; 
    var native_height = 0; 

    //Now the mousemove function 
    $(".magnify").mousemove(function(e){ 
     //When the user hovers on the image, the script will first calculate 
     //the native dimensions if they don't exist. Only after the native dimensions 
     //are available, the script will show the zoomed version. 
     if(!native_width && !native_height) 
     { 
      //This will create a new image object with the same image as that in .small 
      //We cannot directly get the dimensions from .small because of the 
      //width specified to 200px in the html. To get the actual dimensions we have 
      //created this image object. 
      var image_object = new Image(); 
      image_object.src = $(".small").attr("src"); 

      //This code is wrapped in the .load function which is important. 
      //width and height of the object would return 0 if accessed before 
      //the image gets loaded. 
      native_width = image_object.width; 
      native_height = image_object.height; 
     } 
     else 
     { 
      //x/y coordinates of the mouse 
      //This is the position of .magnify with respect to the document. 
      var magnify_offset = $(this).offset(); 
      //We will deduct the positions of .magnify from the mouse positions with 
      //respect to the document to get the mouse positions with respect to the 
      //container(.magnify) 
      var mx = e.pageX - magnify_offset.left; 
      var my = e.pageY - magnify_offset.top; 

      //Finally the code to fade out the glass if the mouse is outside the container 
      if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) 
      { 
       $(".large").fadeIn(100); 
      } 
      else 
      { 
       $(".large").fadeOut(100); 
      } 
      if($(".large").is(":visible")) 
      { 
       //The background position of .large will be changed according to the position 
       //of the mouse over the .small image. So we will get the ratio of the pixel 
       //under the mouse pointer with respect to the image and use that to position the 
       //large image inside the magnifying glass 
       var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1; 
       var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1; 
       var bgp = rx + "px " + ry + "px"; 

       //Time to move the magnifying glass with the mouse 
       var px = mx - $(".large").width()/2; 
       var py = my - $(".large").height()/2; 
       //Now the glass moves with the mouse 
       //The logic is to deduct half of the glass's width and height from the 
       //mouse coordinates to place it with its center at the mouse coordinates 

       //If you hover on the image now, you should see the magnifying glass in action 
       $(".large").css({left: px, top: py, backgroundPosition: bgp}); 
      } 
     } 
    }) 
}) 
1

Java Script

<script type="text/javascript"> 
      $(".pic").live("mousemove", function (e) { 
       var dv = $("#popup"); 
       if (dv.length == 0) { 
        var src = $(this)[0].src; 
        var dv = $("<div />").css({ height: 250, width: 250, position: "absolute" }); 
        var img = $("<img />").css({ height: 250, width: 250 }).attr("src", src); 
        dv.append(img); 
        dv.attr("id", "popup"); 
        $("body").append(dv); 
       } 
       dv.css({ left: e.pageX, top: e.pageY }); 
      }); 
      $(".pic").live("mouseout", function() { 
       $("#popup").remove(); 
      }); 

     </script> 

Использование кода Java Script

<asp:Image ID="img" ImageUrl='<%#"http://gpssurvey.nsps.co.in"+(Eval("IMAGE"))%>' runat="server" Width="40px" Height="50px" CssClass="pic zoom" /> 
Смежные вопросы