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%;
}

<强> DEMO

Answer 3

如果使用图像地图并且图像大小不同，则无法使用纯HTML / CSS解决方案！

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

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

但请记住，在触摸设备上难以识别图像地图！从可接受的角度来看，它们是一场“噩梦”。

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

如何在响应主题中使用maplink设置图像链接？

3 个答案: