safari - 如何修复Safari中的图像映射？页面缩放时损坏

在版本4.0.4（5531.21.10）中，Safari地图处理无法正常工作。

我遇到了同样的问题。我有一个部分解决方案。

为了解决这个问题，我使用了javascript来获取新的图像尺寸，然后检索，重构和重写区域坐标。在页面加载（甚至是先前缩放的页面）上调用此函数允许正确处理图像映射。但是在随后的页面缩放中，如果在变换完成之前使用映射函数（例如，鼠标悬停在地图上），则Safari使用错误的地图坐标。这对我来说在本地加载文件并不明显，但在上传图像后将其托管在免费（和慢速）网站上...

- ＆GT;知道如何让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中的图像映射？页面缩放时损坏

1 个答案: