使用引導程序和CSS的響應點擊區域

我正在嘗試爲下面圖片中的每個矩形中有2個鏈接的圖像創建一個響應點擊區域。這裏是我現在使用的代碼。它沒有任何映射，我會進一步解釋了原因：使用引導程序和CSS的響應點擊區域

<figure id="vpg"> 
    <img src="{{asset('img/click area.png')}}" class="img-responsive" width="1024" height="768"alt=""/>

我使用的地圖類和座標點試過了，效果不錯，但它不是敏感。然後我搜索並試圖使用馬特Stow插件：https://github.com/stowball/jQuery-rwdImageMaps但它沒有奏效。我相信這是因爲自舉或其他原因，因爲他的例子沒有與img-responsive類一起工作。
這是圖片：
的一點是，我需要使用這個類IMG響應，是有什麼我失蹤？我應該如何繼續？有沒有辦法用CSS來做到這一點？我發現這個例子，但我無法理解：使用沒有設置寬度和高度，這img標籤 http://techlife.samsung.com/the-perfect-game-day-set-up.html

來源

2016-06-30 Vinícius Pacheco Vieira

如果我明白你問的是正確的，我會分別創建這兩個div，並將它們絕對放置在圖像頂部。 –

嘗試。這樣你就可以通過操縱它的風格來控制css文件的寬度和高度。嘗試使用％而不是px，因爲這樣％會保持相對於屏幕寬度。如果這沒有幫助，那麼在img標籤中去掉寬度和高度，並圍繞你的img和新的div（使用網格系統，如果你使用bootstrap，它已經在css文件中創建）。這種方式網格系統將控制它內部的圖像和子元素的寬度。
希望我回答你的問題。

來源

2016-06-30 17:54:01 mackelele

我用過你的想法，但我不太明白如何使用網格系統。我發現了一個類似的問題，我相信他們已經使用了你所說的：http://stackoverflow.com/questions/16363029/responsive-images-positioned-over-image –

使用mackelele和fourever的概念Youngz說我以這段代碼解決了這個問題。

<style> 
#counter { 
      position: relative; 
     } 
     #background{ 


     } 
     #squaremoreleft{ 
     position:absolute; 
     width: 20%; 
     left:5%; 
     top:51%; 
     } 
     #squareright{ 
     position:absolute; 
     width: 20%; 
     left:26%; 
     top:51%; 
     } 
</style 

<div class="container"> 
      <div class="row-fluid"> 
      <div class="span12"> 
       <div id="counter"> 
       <img id="background"src="{{asset('img/imgbackground.png')}}" class="img-responsive"/> 
       <a href="link1"> 
       <img id="squaremoreleft"src="{{asset('img/squareleft.png')}}" class="img-responsive" /> 
       </a> 
       <a href="link2> 
       <img id="squareright"src="{{asset('img/squareright.png')}}" class="img-responsive" /> 
       </a> 
       </div> 
      </div> 
      </div> 
     </div>

的代碼在這個問題上Responsive images positioned over image啓發，它的源代碼：http://jsfiddle.net/MgcDU/12389/

來源

2016-07-01 19:05:32

維尼休斯·帕切科·維埃拉的答案和鏈接的作品。這一切在網格系統中完成，例如自舉或基礎使用。在這裏下載基金會Foundation Grid system並閱讀其網站上的文檔以瞭解有關網格系統的更多信息。一切都歸結爲預先製作的div，它們的寬度是預定義的，所以當你放置圖像時，它會隨着圖像周圍的div進行縮放。使用Foundation可以獲得完整的CSS文件，在該文件中可以進行所有基本設置，但是如果您想在瀏覽器中使用檢查器元素（F12鍵）在代碼中找到代碼並指向元素進行檢查。這將告訴你哪個文件控制着哪個類以及裏面是什麼....等等。

來源

2016-07-04 18:41:52 mackelele

謝謝你的信息！我會看看他們關於網格系統的東西，它肯定會幫助我理解更多。 –

使用引導程序和CSS的響應點擊區域

回答

相關問題