如何在圖像響應時使圖像的左側可點擊？

如何在保持圖像響應的同時使圖像的50％可點擊？如何在圖像響應時使圖像的左側可點擊？

我嘗試過使用區域標記和其他方法，這些方法已經在其他問題中討論過但沒有一個是響應式的。

我這樣做的網站是spectrospective.com.au，它是'播放電影'和'播放預告片'的主要Spectrospective橫幅圖片。

我靶向DIV的是：

<div class="hero-video"> 
    <div class="container"> 
     <a href="" data-toggle="modal" data-target="#myhome"> 
      <img src="images/homepage-banner.png" alt=""> 
     </a> 
    </div> 
</div>

來源

2015-04-07 JoshRicha

你可以嘗試在你的圖像定位一個div，它分爲兩個並相應地給兩個孩子不同的環節。 – Sirence

你有沒有試過在'a'和'a'之外製作img，其絕對寬度爲50％？ –

容器中只有兩個'a'鏈接，絕對位置z-index 2和'50％'寬度，一個'左上'，另一個'右上'。你的圖片不應該在'a'中，而應直接放在'.container'中，並且位置絕對z-index 1，top 0 right 0 bottom 0 left 0（意思是你的容器的100％寬度和高度） –

我建議使用position: absolute將它懸停在你的圖像的一半（見工作示例）。希望這可以幫助。

div { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
img { 
 
    background-color: red; 
 
    height: 10em; 
 
    width: 10em 
 
} 
 
a { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 50%; 
 
    background-color: blue; 
 
    width: 5em; 
 
    height:10em; 
 
}

<div> 
 
    <img src="image.png" /> 
 
    <a href="alink.html"></a> 
 
</div>

來源

2015-04-07 08:18:35

哇，這有助於分配現在我明白定位更好了，謝謝！ – JoshRicha

我可能會過評論，但我沒有50代表尚未......無論如何秀，爲什麼不能獲取圖像，把它切一半在圖像編輯器（Photoshop，GIMP等）中，然後將圖像並排放入不同的<a href>。

交替解決方案：創建一個清晰的div，覆蓋圖像的一半，並將<a href>更改爲任何想要的效果。

來源

2015-04-07 08:12:12 Blake

如何在圖像響應時使圖像的左側可點擊？

回答

相關問題