PNG overlay makes asp hyperlink unclickable

Question

I've managed to get a PNG overlay to appear over an asp:hyperlink image, but this now means the hyperlink is unclickable, is there a way around this ?

<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;
}

Answer 1

I don't know how "asp:hyperLink" works but have you tried giving it a z-index larger than the overlay? The link might need position: relative for it to work.

Answer 2

I'm not entirly sure what it is you are trying to achive, if what you want is an image you can click like a link you can use this:

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

Answer 3

Thanks for replying. The hyperlink is getting an image from the database and i wanted to overlay a picture frame over the top. I was positioning the png image using css and absolute positioning but as soon as the png image was on top i lost the link. I've now changed the code around to this:

<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>

The image control now pulls the image from the database, and i've wrapped a hyperlink control around a panel control. The panel control gets a random picture frame image from a selection of 4 frames. The url for the database image is fed to the hyperlink control.

Now when you load the page each product has a random frame and the link takes you to the relevant product page.

Answer 4

Wrap everything including your overlay in the 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>

You'll have to change your css around a bit but that should resolve your issue with the overlay.