Question

我有这个代码来使区域HTML在尝试调整浏览器大小时保持不变，但它似乎不起作用。您可以复制代码并将其放入您的环境中进行测试。为了更容易理解我对那些不理解我的人的实际意义，这里的代码应该使<area>保持与应该是相同的区域，即使调整浏览器大小。所以我的问题是我的代码出了什么问题？

<html>
<style>
body {
margin:0px; 
padding:0px; 
background: url(http://i.imgur.com/oE8mcNi.png) top center no-repeat fixed;
background-color:black;
}
html{
    width:1400px !important;
height:500px !important;
}
</style>


<body>
<div style="width:1400px; margin:0 auto">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" id="imageMaps" width="1400" height="500" usemap="#Map" border="0" />
<map name="Map" id="Map"> 

<area shape="rect" coords="830,311,940,473" onClick="setlanguage('english')" href="#" class="colorbor"/>
    <area shape="rect" coords="1250,311,1380,473" onClick="setlanguage('malay')" href="#" />
    <area shape="rect" coords="1380,311,1400,473 " onclick="setlanguage('simplified')" href="#">

</map>
</div>

</body>
</html>

<script>
var orig_width = 0;

function sizing() { 
    if (orig_width == 0) return;

    var pic = $('#imageMaps');
    var curr_width =  pic.width();      
    var ratio = curr_width / orig_width;

    $("area").each(function() {

        var pairs = $(this).attr("coords").split(', ');

        for(var i=0; i<pairs.length; i++) {

            var nums = pairs[i].split(','); 

            for(var j=0; j<nums.length; j++) { 
                nums[j] = nums[j] * ratio; 
            }

            pairs[i] = nums.join(',');
        }
        $(this).attr("coords", pairs.join(","));
    }); 
    orig_width = curr_width;
}

$("#imageMaps").on("load", function() {
    orig_width = $("#imageMaps").attr("width");    
    $(window).resize(sizing);
}).each(function() {
    if (this.complete) $(this).load();
});

jQuery(document).ready(sizing);
jQuery(window).resize(sizing);

</script>

区域可点击链接对齐关闭

0 个答案: