La superposition PNG rend l'hyperlien asp cliquable

Question

J'ai réussi à faire apparaître une superposition PNG sur une image asp: hyperlink, mais cela signifie maintenant que le lien hypertexte est déclicable, est-il possible de contourner ce problème?

<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

Merci pour la réponse. Le lien hypertexte obtient une image de la base de données et je voulais superposer un cadre d'image sur le dessus. Je positionnais l'image png en utilisant css et le positionnement absolu, mais dès que l'image png était en haut j'ai perdu le lien. Je l'ai changé le code autour de ceci:

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

Le contrôle de l'image tire maintenant l'image de la base de données, et je l'ai enveloppé un contrôle de lien hypertexte autour d'un contrôle du panneau. Le contrôle de panneau obtient une image de cadre d'image aléatoire à partir d'une sélection de 4 images. L'URL de l'image de base de données est transmise au contrôle du lien hypertexte. Maintenant, lorsque vous chargez la page, chaque produit a une image aléatoire et le lien vous amène à la page du produit concerné.

Answer 2

Je ne sais pas comment « asp: HYPERLINK » œuvres mais avez-vous essayé de lui donner un z-index plus grand que la superposition? Le lien pourrait avoir besoin de position: relatif pour que cela fonctionne.

Answer 3

Je ne suis pas sûr entirly ce que vous essayez de achive, si ce que vous voulez est une image que vous pouvez cliquer comme un lien, vous pouvez utiliser ceci:

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

Answer 4

Wrap tout, y compris votre superposition dans le asp: lien

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

Vous devez changer votre css autour d'un peu, mais qui devrait résoudre votre problème avec la superposition.