選取圖片上對應區域

設計給了效果圖片

要實現的效果以下

鼠標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