PNGオーバーレイによりASPハイパーリンクがクリック不可になります

StackOverflow https://stackoverflow.com/questions/1651172

  •  22-07-2019
  •  | 
  •  

質問

asp：hyperlink画像の上にPNGオーバーレイを表示することができましたが、これはハイパーリンクがクリック不可であることを意味します。これを回避する方法はありますか？

<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;
}
役に立ちましたか？

解決 3

返信いただきありがとうございます。ハイパーリンクはデータベースから画像を取得しているので、写真フレームを上に重ねたいと思いました。私は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は、ハイパーリンクコントロールに送られます。

ページをロードすると、各製品にはランダムなフレームがあり、リンクをクリックすると関連する製品ページに移動します。

他のヒント

あなたが何を達成しようとしているのか完全にはわかりません。あなたが望むのが画像であれば、これを使用できるリンクのようにクリックできます：

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

<！> quot; asp：hyperLink <！> quot;動作しますが、オーバーレイより大きいz-indexを指定しようとしましたか？リンクが機能するには、position：relativeが必要になる場合があります。

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を少し変更する必要がありますが、これでオーバーレイの問題が解決するはずです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top