0

我已经设法让 PNG 覆盖出现在 asp:hyperlink 图像上，但这现在意味着超链接不可点击，有没有办法解决这个问题？

<div class="ProductItem">
      <div class="picture">
          <asp:HyperLink ID="hlImageLink" runat="server" />
          <div class="overlay"></div>
      </div>
</div>

    .HomePageProductGrid .ProductItem
{
    text-align: center;
    margin: 10px 10px 10px 10px;
    width: 310px;
    height: 410px;
    background-repeat:no-repeat;
    position:relative;
}

.HomePageProductGrid .ProductItem .picture
{
    text-align: center;
    position:relative;
    padding-top:43px;
}

.HomePageProductGrid .overlay
{
    background: url(images/frame1.png) no-repeat;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 310px;
    height: 410px;
}
4

4 回答 4

2

我不完全确定你想要达到什么目的，如果你想要的是一张图片，你可以像链接一样点击，你可以使用这个：

<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/Images/MyPic.png" NavigateUrl="~/MyPage.aspx">HyperLink</asp:HyperLink>

于 2009-10-30T17:40:51.730 回答
0

我不知道“asp:hyperLink”是如何工作的，但你有没有试过给它一个大于覆盖的 z-index？该链接可能需要 position: relative 才能工作。

于 2009-10-30T17:22:51.300 回答
0

在 asp:hyperlink 中包装包括覆盖在内的所有内容

<div class="ProductItem">

    <asp:HyperLink ID="testHyperlink" CssClass="pictureLink" runat="server" >
        <div class="picture">
            <asp:Image ID="imgProduct" runat="server" />
            <asp:Panel ID="productPanel" runat="server" ></asp:Panel>
        </div>
    </asp:HyperLink>

</div>

您必须稍微更改一下 CSS，但这应该可以解决您的覆盖问题。

于 2009-11-02T01:43:12.573 回答
0

感谢回复。超链接正在从数据库中获取图像，我想在顶部覆盖一个相框。我正在使用 css 和绝对定位来定位 png 图像，但是一旦 png 图像位于顶部，我就失去了链接。我现在将代码更改为：

<div class="ProductItem">

            <div class="picture">
                <asp:Image ID="imgProduct" runat="server" />

                <asp:HyperLink ID="testHyperlink" CssClass="pictureLink" runat="server" >
                <asp:Panel ID="productPanel" runat="server" ></asp:Panel>

                </asp:HyperLink>

            </div>
        </div>

图像控件现在从数据库中提取图像，并且我在面板控件周围包裹了一个超链接控件。面板控件从 4 帧选择中获取随机图片帧图像。数据库图像的 url 被提供给超链接控件。

现在，当您加载页面时，每个产品都有一个随机框架，并且链接会将您带到相关的产品页面。

于 2009-10-30T20:25:37.313 回答