将鼠标悬停在图像控件上，如 asp.net 中的 facebook 图片答案

【问题标题】：Hover on Image control like facebook picture in asp.net将鼠标悬停在图像控件上，如 asp.net 中的 facebook 图片
【发布时间】：2012-01-09 20:45:15
【问题描述】：

我在 ASPX 页面上有一个图像控件。我想像 Facebook 一样在上面显示“更改图片”选项。当点击它应该转到不同的页面。

知道怎么做吗？

【问题讨论】：

你不能单独使用 C# 来做这件事，你需要 javascript ...查看 jQuery .hover 函数：api.jquery.com/hover
你可以用纯 CSS 做到这一点..
公平地说，如果你有 Firebug 或 Chrome 或类似的检查器，你可以确切地了解它们是如何做到的，CSS 等等。
您使用的是什么版本的 ASP.Net？

标签： c# javascript jquery asp.net image

【解决方案1】：

您可以在这里找到操作方法http://www.dreamweavertutorial.co.uk/dreamweaver/articles/transparent-layer-overlay.htm

它们被称为叠加层。

这里是另一个例子

http://css-tricks.com/3118-text-blocks-over-image/

【讨论】：

【解决方案2】：

您需要一些客户端代码来实际管理鼠标悬停事件，然后显示覆盖的 A 标记（带有您想要的文本/图像）

【讨论】：

【解决方案3】：

也许这是你想要的东西：

http://demo.fearlessflyer.com/html/demo/pretty-hovers/

http://thirdroute.com/projects/captify/

希望这会有所帮助。

【讨论】：

【解决方案4】：

试试这个代码

<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        #profile_pic_wrapper{ position:relative; border:#ccc solid 1px; width:200px; height:200px;}
        #profile_pic_wrapper a{ position:absolute; display:none; top:0; right:0; line-height:20px; padding:5px; color:#fff; background-color:#333; text-decoration:underline;}
        #profile_pic_wrapper:hover a{ display:block; }
        #profile_pic_wrapper:hover a:hover{text-decoration:none;}
        .profile_pic{ width:200px; height:200px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="profile_pic_wrapper">
            <asp:Image ID="imgProfilePic" runat="server" ImageUrl="profile.jpg" CssClass="profile_pic"/>
            <asp:HyperLink ID="lnkChangePicture" runat="server" NavigateUrl="ChangeProfilePic.aspx">Change Picture</asp:HyperLink>
        </div>
    </div>
    </form>
</body>

在上面的示例中，我在 aspx 页面中包含了 css 样式，仅用于说明目的。对于现实世界的实现，始终建议将您的样式放在单独的 css 文件中。

【讨论】：

以上代码在 firefox、chrome、safari、opera 和 IE7 上运行良好。这在 IE6 上不起作用。要获得 IE6 支持，您必须使用 javascript。

【解决方案5】：

将 imagebutton 包装在 div 中并绑定 jquery 处理程序以显示或隐藏链接。

编辑：这是一个简单示例：

<head runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">    
    <div id="mynamediv" style="width: 50px;">   
        <div id="mydiv" style="display: none;"><a href="www.google.com">Change Image</a></div>
        <asp:ImageButton runat="server" ID="myimage" ImageUrl="~/myimage.gif" /> 
    </div>
    </form>
<script language="javascript">
    $("#mynamediv").mouseover(function () {
        $("#mydiv").show();   
    });

    $("#mynamediv").mouseout(function () {
        $("#mydiv").hide();
    });
</script>

这里有一个你可能会喜欢的气球提示

http://file.urin.take-uma.net/jquery.balloon.js-Demo.html

【讨论】：

我可以有完整的详细例子吗？