Questions › Area clickable link alignment went off

I have this code to make the area HTML to be stay intact when trying to resize the browser, but it doesn't seems to work. You can copy the code and put into your environment to test it. For easier understanding what I actually meant for those who doesn't understand me, the code here should have make the <area> remain the same area it should be even though resizing the browser. So my question what went wrong with my code?

<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>
Comments :
MuthaFury replied

@RayonDabre Can't do that, preferrable not to refresh.

MuthaFury replied

Anyone can help?


0 Answers :