如何修复Safari中的图像地图？页面缩放时断开
Safari 4显然在imagemaps上有一个严重的缺陷——当页面缩放到100%以外的任何地方时，可点击的区域都会消失。它几乎使图像贴图无法使用 这不是我的页面，但它显示了问题；在safari中放大或缩小，然后单击形状：如何修复Safari中的图像地图？页面缩放时断开,safari,imagemap,Safari,Imagemap,Safari 4显然在imagemaps上有一个严重的缺陷——当页面缩放到100%以外的任何地方时，可点击的区域都会消失。它几乎使图像贴图无法使用 这不是我的页面，但它显示了问题；在safari中放大或缩小，然后单击形状： 图像贴图就像灰尘一样古老，如果我将它们更改为css定位链接，我将失去拥有非方形区域的能力。有人知道解决方法吗 4.0.4版（5531.21.10）中的Safari地图处理无法正常工作 我也有同样的问题。 我有一个局部解决方案 为了解决这个问题，我使用javascript获取
图像贴图就像灰尘一样古老，如果我将它们更改为css定位链接，我将失去拥有非方形区域的能力。有人知道解决方法吗 4.0.4版（5531.21.10）中的Safari地图处理无法正常工作 我也有同样的问题。 我有一个局部解决方案 为了解决这个问题，我使用javascript获取新的图像维度，然后检索、重构和重写区域坐标。在页面加载时调用此函数（即使是以前缩放过的页面）可以正确处理图像映射。但在随后的页面缩放中，如果在转换完成之前使用了映射功能（例如，鼠标悬停在地图上），则Safari使用了错误的地图坐标。这对本地加载文件的我来说并不明显，但在上传图片后，将其托管在一个免费（且速度较慢）的站点上 -->知道如何让Safari重新评估坐标吗
例子 全局_区域=新数组（）； 全局_宽度=1； // //本例假设： //1）文件中有一个图像地图， //2）区域坐标以逗号分隔，并且 //3）高度已缩放到与宽度相同的大小。 // 函数initglobal（）{//将原始区域坐标字符串保存到全局数组，在加载时调用 var arrayAreas=document.body.getElementsByTagName（“区域”）； 全局_width=800；//获取原始宽度 对于（变量i=0；i
在4.0.4版（6531.21.10，r52564）中对我很好 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Example</title> <script type="text/javascript"> global_areas=new Array(); global_width=1; // // This example assumes: // 1) there is one image map in the document, // 2) the area coords are comma delimited, and // 3) the height has been zoomed an identical amount to the width. // function initglobal() { // save original AREA coordinate strings to a global array, called at load var arrayAreas = document.body.getElementsByTagName("AREA"); global_width= 800; // get original width for (var i = 0; i < arrayAreas.length; i++) { global_areas[i] = arrayAreas[i].coords; } } function scaleArea() { // using stored values, recalculate new values for the current size var arrayAreas = document.body.getElementsByTagName("AREA"); for (var i=0;i < arrayAreas.length;i++) { scale=document.getElementById("test").width/global_width; alert( "scale = " + scale); splitarray=global_areas[i].split(","); // set numeric array var tmparray=new Array(); for (var j = 0; j < splitarray.length; j++) { tmparray[j]=parseInt(splitarray[j])*scale; // rescale the values tmparray[j]=Math.round(tmparray[j]); } alert( "Original " + global_areas[i] + " Modified " + tmparray ); arrayAreas[i].coords=tmparray.join(","); // put the values back into a string } global_width=document.getElementById("test").width; // set new modified width for (var i = 0; i < arrayAreas.length; i++) { global_areas[i] = arrayAreas[i].coords; } } </script> </head> <body onload="initglobal(); scaleArea();" > <input type="submit" value="rescale" onclick="scaleArea();" /> <map name="maptest" id="maptest"> <area shape="circle" coords="400,600,100" href="http://www.freeimagehosting.net/uploads/d17debd56a.gif" alt="go yellow" onmouseover="document.getElementById('test').src='yellow.gif'" onmouseout="document.getElementById('test').src='http://www.freeimagehosting.net/uploads/8701f2bdf1.gif'" > <area shape="rect" coords="0,0,400,400" href="http://www.freeimagehosting.net/uploads/f2f79ae61d.gif" alt="go red" onmouseover="document.getElementById('test').src='red.gif'" onmouseout="document.getElementById('test').src='http://www.freeimagehosting.net/uploads/8701f2bdf1.gif'" > <area shape="rect" coords="400,0,800,400" href="http://www.freeimagehosting.net/uploads/37088bb3cb.gif" alt="go green" onmouseover="document.getElementById('test').src='green.gif'" onmouseout="document.getElementById('test').src='http://www.freeimagehosting.net/uploads/8701f2bdf1.gif'" > <area shape="rect" coords="0,400,800,800" href="http://www.freeimagehosting.net/uploads/7e3940bb96.gif" alt="go blue" onmouseover="document.getElementById('test').src='blue.gif'" onmouseout="document.getElementById('test').src='http://www.freeimagehosting.net/uploads/8701f2bdf1.gif'" > </map> <img id="test" src="http://www.freeimagehosting.net/uploads/8701f2bdf1.gif" alt="map test" usemap="#maptest" width="800" height="800" /> </body> </html>