javascript - 在 ASP 内容页面上使用 javascript 悬停

Question

我在获取一些代码用于工作项目时遇到了一些问题。最终目标是，当客户端将鼠标悬停在页面上的小图像上时，他们可以看到与该行相关的图像的缩略图。目前，这就是我设置代码的方式:

<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
    <style type="text/css">
        #full{position:absolute;display:none;}
    </style>
    <asp:Content ID="Full" ContentPlaceHolderID="head">
        <asp:Image runat="server" ClientIDMode="Static" ID="FullImg"/>
    </asp:Content>

这里的想法是，这应该创建图像所需的 CSS，并创建覆盖的 div。我可能是错的，我的背景是 PHP，而不是 ASP。如果我尝试将标题内容放在 Content1 上方，则会收到“仅在包含内容控件的内容页中直接允许内容控件。”“仅在包含内容控件的内容页中允许直接使用内容控件。”错误。

Javascript 直接放置在上面的下面:

   <script type="text/javascript" language="JavaScript">
    <!-- 
        $('img').hover(function(e){
        var x = e.clientX,
            y = e.clientY;
        $('#FullImg')[0].src = $(this).attr('src');
        $('#FullImg').css({top: y, left : x}).show();
    }, function(){
        $('#FullImg').hide();
        })
    // -->
    </script>

图像设置:

<asp:TemplateField HeaderText="Thumbnail" ItemStyle-CssClass="c">
    <ItemTemplate>              
        <asp:HyperLink runat="server" NavigateUrl='<%# String.Format("~/ConvertImage.ashx?FleetID=" + m_oUserInfo.CurrentFleetID + "&VehicleID={0}&picID={1}&picType=PictureFull&extention={2}", Eval("VehicleID"), Eval("StoredPictureID"), Eval("PictureExtension"))%>' Target="_blank">
            <asp:Image ID="img" runat="server" ImageURL="~/Images/imgHover.png" ImageAlign="AbsMiddle" />
        </asp:HyperLink>
    </ItemTemplate>
</asp:TemplateField>

正如我所说，我的背景是 PHP，因此这次 ASP 过渡有点像从消防水带里喝水。任何帮助将不胜感激。

编辑:更新了代码，它似乎仍然没有做任何事情。

澄清一下，这是我在 fiddle 中所做的代码这在 html 中工作得很好，但由于某种原因，它在 ASP 中不起作用。

Answer 1

您必须添加属性 ClientIDMode="Static"给您<asp:Image>并给它一个 ID:

<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
    <style type="text/css">
        #full{position:absolute;display:none;}
    </style>
    <asp:Content ID="Full" ContentPlaceHolderID="head">
        <asp:Image runat="server" ClientIDMode="Static" ID="FullImg"/>
</asp:Content>

然后调整您的代码:

<script>
$('img').hover(function(e){
    var x = e.clientX,
        y = e.clientY;
    $('#FullImg')[0].src = $(this).attr('src');
    $('#FullImg').css({top: y, left : x}).show();
}, function(){
    $('#FullImg').hide();
})
</script>

<小时/>

说明:

首先，一个asp:Content标签不会在客户端呈现它的 ID，这意味着您无法在 javascript/css 中访问它。

此外，ASP.Net 默认情况下会覆盖客户端 ID，以防止重复 ID。但是，您可以通过添加属性 ClientIDMode="Static" 来覆盖此行为。 。这将导致 ASP.Net 引擎创建与您在服务器端(在 ASP.Net 代码中)指定的 ID 相同的客户端标记，以便您可以更轻松地使用 javascript/css 访问它。

<小时/>

第二种方法

您可以访问 img 标记的 ClientID 并使用 ASP.Net 内联代码将其填充到 javascript 中:

 <script type="text/javascript" language="JavaScript">
    <!-- 
        $('img').hover(function(e){
        var x = e.clientX,
            y = e.clientY;
        $('#<%= FullImg.ClientID %>')[0].src = $(this).attr('src');
        $('#<%= FullImg.ClientID %>').css({top: y, left : x}).show();
    }, function(){
        $('#<%= FullImg.ClientID %>').hide();
        })
    // -->
    </script>