HTML hot area map coordinates, adaptive method with window size

Although the picture map/picture hotspot is powerful, it cannot be adapted according to the window adjustment of the page, and the picture map has become a decoration.

Today, I will share with you a method. With it, you no longer have to worry about going through the wrong door with the picture map.

Not much to say, go directly to the source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
    .navImage img{
        width:100%;
        height:auto;
    }
    .navImage{
        /* text-align:center; */
        margin-left:-8px!important;
    }
    body{
        margin:0!important;
    }
</style>
<body>
<div class="navImage">
    <img id="img" src="./02.jpg" alt="navbar" usemap="#navImg">
    <map id="navImg" name="navImg">
        <area shape="rectangle" coords="160,65,300,120" href="http://www.baidu.com" title="Production of Modified Asphalt" alt="Production of Modified Asphalt">
        <area shape="rectangle" coords="300,140,420,190" href="#" title="Asphalt Transportation" alt="Asphalt Transportation">
        <area shape="rectangle" coords="490,130,620,190" href="#" alt="试验室" title="试验室">
        <area shape="rectangle" coords="610,200,780,260" href="#" alt="Asphalt Production" title="Asphalt Production">
        <area shape="rectangle" coords="815,280,1000,340" href="#" alt="Production of Water Stabilized Mixtures" title="Production of Water Stabilized Mixtures">
        <area shape="rectangle" coords="270,300,420,360" href="#" alt="Mix Transportation" title="Mix Transportation">
        <area shape="rectangle" coords="320,380,440,450" href="#" alt="Paving" title="Paving">
        <area shape="rectangle" coords="520,420,640,470" href="#" alt="Pavement Compaction" title="Pavement Compaction">
    </map>

</div>
<script>
    areaValue();
    var timeout = null;//onresize triggers too many times, set a timer
    window.onresize = function () {
        clearTimeout(timeout);
        timeout = setTimeout(function () { window.location.reload(); }, 100);//page size changes, reload the page to refresh the MAP
    }
    function areaValue(){
        $("area").each(function(){
            var oldValue=new String();
            oldValue=$(this).attr("coords");
            var newValue=adjustPoint(oldValue);
            $(this).attr("coords",newValue);
        })
    }
    function adjustPoint(item){
        var pageWidth=$("body").css("width"); //The length and width of the page
        var pageHeight=$("body").css("height");
        var imageWidth = 1022; //The length and width of the image
        var imageHeigth = 599;
        var itemChild = item.split(",");
        for(var i=0;i<itemChild.length;i++){
            itemChild[i] = Math.round(parseInt(itemChild[i]) * parseInt(pageWidth) / parseInt(imageWidth)).toString();
            i++;
            itemChild[i] = Math.round(parseInt(itemChild[i]) * parseInt(pageHeight) / parseInt(imageHeigth)).toString();
        }
        //generate new coordinates
        var newValue= "";
        for (var i = 0; i < itemChild.length; i++) {
            newValue += itemChild[i];
            if (i < itemChild.length - 1) {
                newValue += ",";
            }
        }
        return newValue;
    }
</script>
</body>

Copy and run directly to see the effect, note:

① Here I am using the latest version of jquery CDN accelerated version, the jquery version should not be too low

②window.onresize event, browser size change response event, which I summarized in the following article http://570109268.iteye.com/admin/blogs/2406188

③window.location.reload(), refresh the page, which is also compared and summarized for multiple js refresh pages in the following article

HTML hot area map coordinates, adaptive method with window size

Guess you like