Javascript 图像上的响应映射是否有人可以添加更多想法

如果图像的宽度以%表示，并且我们更改了选项卡或窗口的大小，则由于宽度的百分比，它会相应地被压缩或扩展。但是在那张图像上映射呢。不能用%表示。因为它基本上是一组坐标

我将以图像上的多边形区域为例

<img src=”xx.png” style=”width:100%;” border=”0″ usemap=”#Map” id=”img” />
<map name=”Map”>
<area shape=”poly” id=”ar1″ coords=”107,64,170,65,192,87,

196,124,177,147,150,149,147,168,109,168,106,65″ href=”xyz.html”>
</map>
Basically there is an image with id “img” and on which a poly area is set as a link “xyz.html”.

the coords in the poly area is 107,64,170,65,192,87,196,124,

177,147,150,149,147,168,109,168,106,65
it is a collection of coordinates as x1,y1, x2,y2, x3,y3 ….., x9,y9

所以在图像上有9个点或多边形区域的边，作为链接

若图像的原始宽度为1000px，高度为600px，则此多边形区域坐标是根据该尺寸计算的。但由于我们没有在图像的style属性中设置它，并将其设置为100%宽度，因此我们将使用两个javascript变量baseWidth、baseHeight，并将它们的值设置为1000600。然后像下面这样编写代码-

<script>

var baseWidth = 1000;
var baseHeight = 600;
var basepolycoords = document.getElementById(‘ar1′).coords;window.onresize = resizefunc;
function resizefunc()
{
    var h = document.getElementById(‘mainMap’).offsetHeight;
    var w = document.getElementById(‘mainMap’).offsetWidth;
    var coords = changecoords(basepolycoords,w,h,baseWidth,baseHeight);
    document.getElementById(‘ar1′).coords = coords;
}

function changecoords(coords,newx,newy,oldx,oldy)
{
    var arr = new Array();
    arr = coords.split(“,”);
    var i=0;
    for(i=0;i<arr.length;i++)
    {
        if(i%2==0)
        {
            arr[i] = parseInt((newx/oldx)*arr[i]);
        }
        else
        {
            arr[i] = parseInt((newy/oldy)*arr[i]);
        }
    }
    var str = arr.join();
    return str;
}
resizefunc();//called to adjust coords according to its initial window size.
</script>

---

你的报价全错了。用直引号替换所有的卷曲引号和素数。可能重复