0

Safari 4 显然有一个严重的图像映射错误 - 当页面缩放到 100% 以外的任何内容时，可点击区域会失去注册。它几乎使图像映射无法使用。

这不是我的页面，但它显示了问题；在 safari 中放大或缩小，然后单击一个形状： http ://www.elated.com/articles/creating-image-maps/

图像地图和泥土一样古老，如果我将它们更改为 css 定位链接，我将失去拥有非方形区域的能力。有谁知道解决方法？

4

1 回答 1

1

Safari 地图处理在版本 4.0.4 (5531.21.10) 中无法正常工作。

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

为了解决这个问题，我使用 javascript 来获取新的图像尺寸，然后检索、重构和重写区域坐标。在页面加载（甚至是以前缩放的页面）时调用此函数可以正确处理图像映射。但是在页面的后续缩放中，如果在转换完成之前使用了映射功能（例如，鼠标悬停在地图上），那么 Safari 会使用错误的地图坐标。这对我在本地加载文件并不明显，但是在上传要托管在免费（且速度较慢）网站上的图像之后......

--> 知道如何让 Safari 重新评估坐标吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 过渡//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<头部>
 <title>示例</title>
 <script type="text/javascript">
  global_areas=新数组（）；
  全局宽度=1；
//
// 这个例子假设：
// 1) 文档中有一张图片映射，
// 2) 区域坐标用逗号分隔，并且
// 3) 高度已被缩放到与宽度相同的量。
//
  function initglobal() { // 将原始 AREA 坐标字符串保存到全局数组中，在加载时调用
   var arrayAreas = document.body.getElementsByTagName("AREA");
   全局宽度= 800；// 获取原始宽度
   for (var i = 0; i < arrayAreas.length; i++) {
    global_areas[i] = arrayAreas[i].coords;
   }
  }
  function scaleArea() { // 使用存储的值，重新计算当前大小的新值
   var arrayAreas = document.body.getElementsByTagName("AREA");
   for (var i=0;i < arrayAreas.length;i++) {
    scale=document.getElementById("test").width/global_width;
    警报（“规模=”+规模）；  
    splitarray=global_areas[i].split(","); // 设置数值数组
    var tmparray=新数组（）；
    for (var j = 0; j < splitarray.length; j++) {
     tmparray[j]=parseInt(splitarray[j])*scale; // 重新调整值
     tmparray[j]=Math.round(tmparray[j]);
    }
    
    alert("原始" + global_areas[i] + "修改" + tmparray );  
    
    arrayAreas[i].coords=tmparray.join(","); // 将值放回字符串中
   }
   global_width=document.getElementById("test").width; // 设置新的修改宽度
   for (var i = 0; i < arrayAreas.length; i++) {
    global_areas[i] = arrayAreas[i].coords;
   }
  }
 </脚本>
</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'" >
</地图>
<img id="test" src="http://www.freeimagehosting.net/uploads/8701f2bdf1.gif" alt="map test" usemap="#maptest" width="800" height="800" />
</正文>
</html>
于 2010-03-10T07:15:20.097 回答