如何製作帶有文本/按鈕的圖像頂部可鏈接

我有一個div，其中包含帶有文本的圖像以及放置在其頂部的按鈕。文本被絕對定位並將覆蓋整個圖像。在文本的末尾也將是一個按鈕。我試圖讓圖像成爲一個鏈接，但我遇到問題。如何製作帶有文本/按鈕的圖像頂部可鏈接

我當前的解決方案涉及將我的圖像和文本都包裝在a標記中。這不起作用，因爲當用戶嘗試點擊按鈕時，他們會點擊鏈接而不是按鈕。我也嘗試在a標籤內包裹我的img標籤，但由於我的文本位於頂部，鏈接永遠不會被註冊爲可點擊。

HTML：

<div class="tile"> 
    <a href="http://www.google.ca"> 
     <img src="http://www.placehold.it/480x260"> 
     <div class="text"> 
      <p>Long long paragraph</p> 
      <button>Button</button> 
     </div> 
    </a> 
</div>

CSS：

.tile { position:relative; width:480px; height:260px; } 
.tile .text { position:absolute; top:0px; left:0px; width:480px; height:260px; }

來源

2012-10-16 Jon

~~我假設你正在使用Z-index屬性的文字和按鈕定位在圖像上。~~ 您必須使用合適的事件觀察器/事件處理程序模式將click事件滲透到圖像中，以便通過它們處理文本和按鈕的適當點擊，並且需要向下拖動到圖像的點擊是通過圖像/按鈕的事件處理程序進一步傳遞。

在更多的研究，這種技術被稱爲事件冒泡（對不起術語滑倒了我的腦海更早）。如何完成這項工作的其他幫助@https://stackoverflow.com/a/1026101/17716

來源

2012-10-16 04:08:33

我不太明白你在說什麼。你的意思是我需要用JS來觀察點擊的內容嗎？如果按鈕被點擊，則無效背景圖片鏈接？ – Jon

是的，這是一種方式。另一個可能是我添加到我的答案中的鏈接。我沒有嘗試過，但它應該工作 –

嗯..讓我做一些關於冒泡的研究。我需要一個非常強大和簡單的解決方案，因爲我的'.tile'模塊將出現在我的網站上的任何地方，每個頁面都會出現幾次。 – Jon

如何製作帶有文本/按鈕的圖像頂部可鏈接

回答

相關問題