使用引导程序和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的响应点击区域

回答

相关问题