选取图片上对应区域

设计给了效果图片

要实现的效果如下

鼠标hover在最后一个button出现一个

方法是

<div class="top-box">
        <div class="topimg-box">
            <img src="jbt-download/download_bg.jpg" width="100%">
        </div>
        <a href="https://itunes.apple.com/cn/app/id1069591410"><div class="lgolios-box"></div></a>
        <a href="http://dl.jianbaolife.com/jianbao/app/jianbaotong.apk"><div class="lgolandroid-box"></div></a>
        <div class="lgolimg-box">
        </div>
        <div class="downimg-box">
            <img width="100%" src="jbt-download/download_qrcode.png"> 
        </div>
     </div>

$(function(){
    var width=$(window).width();
    var height=width*0.56;
    $('.top-box').css('height',height);
    $(window).resize(function() {
      width=$(window).width();
      height=width*0.56;
      $('.top-box').css('height',height);
      $('.top-box').css('width','100%');
    }); 
    $(".lgolimg-box").hover(function(){  
        $(".downimg-box").show();  
    },function(){  
        $(".downimg-box").hide();  
    })  
})

css:

.top-box{ max-width:1920px; width:100%; overflow:hidden;}
.lgolimg-box{max-height: 500px;height: 6%;max-width: 788px;width: 14%;margin-top: 1.5%;margin-left: 21%;margin-right: auto;position: relative;cursor: pointer;}
.lgolandroid-box{max-height: 500px;height: 6%;max-width: 788px;width: 14%;margin-top: 1.5%;margin-left: 21%;margin-right: auto;position: relative;cursor: pointer;}
.lgolios-box{max-height: 500px;height: 6%;max-width: 788px;width: 14%;margin-top: 27%;margin-left: 21%;margin-right: auto;position: relative;cursor: pointer;}
.downimg-box{height: 20%;width: 7.5%;margin-top: -9%;margin-left: 35%;margin-right: auto;position: relative;z-index: 999;display: none;}

做法是将包裹图片的div设置absolute的定位，图片的宽度设置成100%，高度根据原图片的宽高比来计算，js设置这个div的高度，

之后使用三个div分别布局到三个按钮上面。

 

 也可使用map