如何在响应式主题中使用地图链接在图像上设置链接?

Question

我正在尝试通过maplink在图像上放置链接，但它不适用于响应式主题。我不知道如何使其响应。如果有人有一些想法，请分享。

.html

<img src="http://www.gate7infotech.com/projects/development/MyLuckyBottle/wp-content/themes/twentythirteen/images/home_background.jpg" alt="new" width="100%" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="poly" coords="691,918,705,756,931,763,910,930,692,920" href="http://youtu.be/zG28Gy6mKO0" target="_self" alt="new-video" />
</map>
</div>

.css

.container{
width:100%;
margin:0 auto;
}

Answer 1

http://jsfiddle.net/coma/gVu5y/

.HTML

<div class="map">
<img src="http://www.gate7infotech.com/projects/development/MyLuckyBottle/wp-content/themes/twentythirteen/images/home_background.jpg"/>
<a href="#" class="a"></a>
<a href="#" class="b"></a>
<a href="#" class="c"></a>
</div>

.CSS

div.map {
position: relative;
}
div.map > img {
display: block;
max-width: 100%;
}
div.map > a {
display: block;
position: absolute;
}
div.map > a:hover {
background-color: rgba(255, 0, 0, .5);
}
div.map > a.a {
top: 0;
left: 0;
width: 50%;
height: 50%;
}
div.map > a.b {
top: 0;
left: 50%;
width: 20%;
height: 50%;
}
div.map > a.c {
bottom: 0;
right: 0;
width: 20%;
height: 50%;
}

Answer 2

如果你想实现响应式设计，不要使用图像映射，而是可以使用背景图像和<a>标签position:absolute来div哪个有图像映射。使用百分比在响应式布局中获得最佳视图。

.HTML

<div class="conatiner">
<a href="#">link</a>
</div>

.CSS

.conatiner{
width:100%;
background:red;
height:500px;
position:relative;
}
.conatiner a{
position:absolute;
top:40%;
left:30%;
}

演示

Answer 3

如果您使用图像映射并且图像的大小可能会有所不同，那么纯 HTML/CSS 解决方案是不可能的！

你必须使用一些辅助技术，如Javascript。

有一个jQuery插件，它根据图像大小重新计算地图坐标：
jQuery-rwdImageMaps

但也要记住，图像映射在触摸设备上很难识别！
从可访问性的角度来看，它们是一场"噩梦"。

所以最好不要在响应式设计中使用图像映射！