HTML热区map坐标，随窗口大小自适应办法（javascript）

原文：https://blog.csdn.net/crystalwood/article/details/13533401

<img usemap="#planetmap" src="/images/flashSale/flash_sale_activity_detail.png" alt="">
    <map name="planetmap" id="planetmap">
        <area shape="rect" coords="82,311,625,479" href="javascript:alert(1)" alt="Sun" />
    </map>

(function () {

        adjust ()

        var timer = null
        window.onresize = function () {
            clearTimeout(timer)
            timer = setTimeout( function () {
                window.location.reload()
            }, 100)
        }
        //重新设置每个热区
        function adjust () {
            var areas = $('#planetmap').children()
            $.each(areas, function (idx, ele) {
                var oldCoords = $(ele).attr('coords');
                console.log(oldCoords)
                $(ele).attr('coords', adjustPosition(oldCoords) );
            })
        }
        //坐标转换
        function adjustPosition (pos) {
            var docWidth = $('body').width(),
                docHeight = $('body').height(),
                imageWidth = 700,
                imageHeight = 1000;

            var coords = pos.split(',');

            for (var i = 0; i < coords.length; i++) {
                coords[i] = Math.floor( parseInt(coords[i]) * docWidth / imageWidth ).toString();
                i++;
                coords[i] = Math.floor( parseInt(coords[i]) * docHeight / imageHeight ).toString();
            }
            console.log(coords.join(','))
            return coords.join(',')

        }

    })()

原文：https://blog.csdn.net/crystalwood/article/details/13533401