PNG Overlay macht asp Hyperlink unclickable

Question

Ich habe es geschafft, eine PNG-Overlay, um über eine ASP angezeigt: Hyperlink Bild, aber das bedeutet nun der Hyperlink unclickable ist, gibt es eine Möglichkeit, um dieses

<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

Vielen Dank für die Beantwortung. Der Hyperlink wird immer ein Bild aus der Datenbank und ich wollte einen Bilderrahmen über die Spitze zu überlagern. Ich war die Positionierung des PNG-Bildes mit CSS und absoluter Positionierung, aber sobald das PNG-Bild auf der Oberseite war verlor ich den Link. Ich habe jetzt den Code um zu dieser Änderung:

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

Die Bildsteuerung zieht nun das Bild aus der Datenbank, und ich habe ein Hyperlink-Steuerelement um ein Panel-Steuerelement gewickelt. Die Systemsteuerung bekommt ein zufälliges Bildrahmenbild aus einer Auswahl von 4 Frames. Die URL für die Datenbank Bild wird auf das Hyperlink-Steuerelement zugeführt.

Wenn Sie jetzt die Seite jedes Produkt laden hat einen zufälligen Rahmen und der Link führt Sie auf den jeweiligen Produktseiten.

Answer 2

Ich bin nicht ganz sicher, was es ist, Sie zu achive versuchen, wenn das, was wollen Sie ein Bild ist, dass Sie wie ein Link klicken, können Sie diese verwenden können:

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

Answer 3

Ich weiß nicht, wie „asp: HYPERLINK“ funktioniert, aber haben Sie es einen Z-Index größer als der Overlay versucht zu geben? Die Verbindung könnte Position benötigen. Relativ für sie arbeiten

Answer 4

Wickeln Sie alles, einschließlich Overlay im 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>

Sie müssen in Ihre CSS ändern sich ein wenig, aber das sollte Ihr Problem mit dem Overlay lösen.