如何修复 Safari 中的图像映射？页面缩放时损坏
Safari 4 显然在图像映射方面存在严重错误 - 当页面缩放至 100% 以外的任何值时，可点击区域会失去注册。它几乎使图像贴图无法使用。
这不是我的页面，但它显示了问题；在 Safari 中放大或缩小，然后单击形状： http://www.elated.com/articles/creating-image-maps/< /a>
图像映射就像泥土一样古老，如果我将它们更改为 css 定位链接，我将失去拥有非方形区域的能力。有谁知道解决方法？
Safari 4 apparently has a serious bug with imagemaps - the clickable areas go out of registration when the page is zoomed to anything other than 100%. It pretty much renders image maps unusable.
This is not my page, but it shows the problem; zoom in or out in safari and then click a shape:
http://www.elated.com/articles/creating-image-maps/
Image maps are as old as dirt, and if I change them to css positioned links I lose the ability to have non-square areas. Does anyone know of a workaround?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在版本 4.0.4 (5531.21.10) 中，Safari 地图处理无法正常工作。
我也有同样的问题。
我有一个部分解决方案。
为了解决这个问题，我使用 JavaScript 来获取新的图像尺寸，然后检索、重构和重写区域坐标。在页面加载时调用此函数（甚至是先前缩放的页面）可以正确处理图像映射。但在随后缩放页面时，如果在转换完成之前使用映射功能（例如，将鼠标悬停在地图上），则 Safari 会使用错误的地图坐标。这对我来说在本地加载文件并不明显，但是在上传要托管在免费（且速度慢）网站上的图像之后......
-->知道如何让 Safari 重新评估坐标吗？
<!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>Safari map handling fails to work properly for me in Version 4.0.4 (5531.21.10).
I am having the same problem.
I have a partial solution.
In an attempt to work around this problem, I have used javascript to get the new image dimensions and then to retrieve, refactor, and rewrite the area coordinates. Calling this function on page load (even a previously zoomed page) allows proper processing of the image map. But on subsequent zooming of the page, if the mapping function is used (e.g., mouse hovers over map) before the transformation is done, then Safari uses the wrong map coordinates. This wasn't obvious to me loading the file locally, but after uploading the images to be hosted on a free (and slow) site...
--> Any idea how to get Safari to reevaluate the coordinates?
<!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>