html的map自适应

Map常识
请自己看吧:http://www.w3school.com.cn/tags/tag_map.asp
Map自适应
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            html,body{padding: 0; margin: 0;}
        </style>
    </head>
    <body>
        <img src="img/img.jpg" border="0" usemap="#planetmap" alt="Planets"  width="100%"/>
        <map name="planetmap" id="planetmap">
            <area shape="rect" coords="130,40,136,60"   id="eye"  href ="#" alt="eye" />
        </map>
        <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
        <script>
            $("#eye").click(function(){
                alert("眼睛");
            })
            
            //重新定位map位置
            function rsz(){
                //正常情况下为386尺寸:计算比例
                var bl=$("body").innerWidth()/386;
                var x1=bl*130;
                var y1=bl*40;
                var x2=bl*136;
                var y2=bl*60;
                
                //重新计算位置
                $("#eye").attr({"coords":x1+","+y1+","+x2+","+y2})
            }
            
            //窗口宽度改变时执行
            $(window).resize(function() {
                rsz();
            });
            
            //页面初始化时候执行
            $(function(){
                rsz();
            })
        </script>
    </body>
</html>