La superposición PNG hace que el hipervínculo asp no se pueda hacer clic

Question

He logrado que aparezca una superposición PNG sobre una imagen asp: hipervínculo, pero esto ahora significa que el hipervínculo no se puede hacer clic, ¿hay alguna forma de evitarlo?

<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

Gracias por responder. El hipervínculo está obteniendo una imagen de la base de datos y quería superponer un marco de imagen en la parte superior. Estaba posicionando la imagen png usando CSS y posicionamiento absoluto, pero tan pronto como la imagen PNG estaba en la parte superior, perdí el enlace. Ahora he cambiado el código a esto:

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

El control de imagen ahora extrae la imagen de la base de datos, y he envuelto un control de hipervínculo alrededor de un control de panel. El control del panel obtiene una imagen de cuadro aleatorio de una selección de 4 cuadros. La url para la imagen de la base de datos se alimenta al control de hipervínculo.

Ahora, cuando carga la página, cada producto tiene un marco aleatorio y el enlace lo lleva a la página del producto relevante.

Answer 2

No estoy completamente seguro de qué es lo que estás tratando de lograr, si lo que quieres es una imagen, puedes hacer clic como un enlace, puedes usar esto:

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

Answer 3

No sé cómo " asp: hyperLink " funciona, pero ¿has intentado darle un índice z más grande que la superposición? El enlace puede necesitar posición: relativo para que funcione.

Answer 4

Envuelva todo, incluida su superposición en el asp: hipervínculo

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

Tendrá que cambiar su CSS un poco, pero eso debería resolver su problema con la superposición.