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

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