Resize image map on window resize

前端 未结 7 1986
情话喂你
情话喂你 2020-12-20 18:59

I\'m trying to resize an image map on window resize event. The closest I\'ve gotten is to use a mouseclick event, but it needs to be window resize for what I\'m doing. I\'m

相关标签:
7条回答
  • 2020-12-20 19:42

    I wrote some simple function to rebuild all map points on every event. Try this

    function mapRebuild(scaleValue) {
        var map = $("#imgmap"); // select your map or for all map you can choose $("map").each(function() { map = $(this);.....})
        map.find("area").each(function() { // select all areas
            var coords = $(this).attr("coords"); // extract coords
                coords = coords.split(","); // split to array
            var scaledCoords = "";
            for (var coord in coords) { // rebuild all coords with scaleValue
                  scaledCoords += Math.floor(coords[coord] * scaleValue) + ",";
                }
            scaledCoords = scaledCoords.slice(0, -1); // last coma delete
            $(this).attr("coords", scaledCoords); // set new coords
            });
        }
    

    scaleValue can be calculated as oldWindowWidth/newWindowWidth. Of course you need to keep the value of oldWindowWidth on window resize. Maybe my solution not on time, but i hope this is useful to someone

    0 讨论(0)
提交回复
热议问题