我构建了一个饼图，它是带有客户端图像映射的图像。图像映射最初是在页面中定义的，但坐标通过 JavaScript DOM 操作进行更新以执行一些有用的操作。 为什么图像地图坐标上的 DOM 操作仅对某些浏览器有效，而其他浏览器似乎忽略了这些更改？有简单的原因和解决方法吗？ 可以在右下角看到饼图：http: //catza.net/en/browseall/
我已经在 Windows 7 上对此进行了测试，它适用于 Chrome 15.0 (WebKit)、Firefox 7.0 (Gecko) 和 Safari 5.1 (WebKit)。当鼠标指针悬停在饼图上时，这些浏览器会显示各扇区上正确的向下钻取链接以及搜索引擎的标题。 Internet Explorer 8 (Trident) 和 Opera 11.52 (Presto) 似乎只是坚持使用初始坐标。基于此有限测试，图像地图坐标上的 DOM 更新适用于 Gecko 和 Webkit，但不适用于 Trident 和 Presto。欢迎更多测试结果。
以下是有关实施的一些背景信息。 http://catza.net/en/browseall/ 的页面源显示图像标签 ![]()
我知道有很多可用的解决方法。我可以将坐标加载到服务器并在创建页面时正确设置它们。但这意味着在我收到 Google 的坐标之前，该页面无法发送出去。我可以使用较新的 Google 图表工具，但我的测试表明我可以获得更快的页面渲染速度，尤其是在使用 Google Image Charts API 的慢速工作站上。我还可以使用 JavaScript 将 img 和 map 标签动态创建到 DOM，但我宁愿在服务器上构建完整的页面。
I've built a pie chart that is an image with client side image map. The image map is intially defined in the page but the coordinates get updated via JavaScript DOM manipulation to do something useful. Why is the DOM manipulation on image map coordinates effective only with some browsers while others just appear to ignore the changes? Is there a simple reason and fix? The pie chart can be seen here on the bottom right: http://catza.net/en/browseall/
I've tested this on Windows 7 and it works on Chrome 15.0 (WebKit), Firefox 7.0 (Gecko) and Safari 5.1 (WebKit). Those browser show correct drill down links on the sectors to the search engine and also titles when mouse pointer is over the pie. Internet Explorer 8 (Trident) and Opera 11.52 (Presto) just seem to stick with the initial coordinates. Based on this limited testing DOM update on image map coordinates works with Gecko and Webkit and but not with Trident and Presto. More test results are welcome.
Here is some background information about the implementation. The page source of http://catza.net/en/browseall/ shows the image tag <img id="viz_dist" and the map tag <map name="map_dist">. There is everything else ready in the map but not the correct coordinates since they are not yet known. The chart and the correct map coordinates are provided by Google Image Charts API. The update code http://catza.net/js_site/dist.js activates on $(document).ready and then processes the JSON data received to DOM. It touches the coords attribute using JQuery attr. The reset of the source code can be found on Google Code: http://code.google.com/p/catz/
I know that there are plenty of workarounds available. I could load the coordinates to the server and set them correctly when the page is created. But that means the page cannot be sent out before I receive the coordinates from Google. I could use the newer Google Chart Tools but my tests indicate I get faster page rendering especially on slow workstations with Google Image Charts API. I could also create both the img and map tags dynamically to DOM using JavaScript but I rather build the complete page on the server.
发布评论
评论（1）
我找到了解决办法。这个问题根本不在于仅适用于某些浏览器的图像地图坐标的 DOM 更新。
我在尝试从 Google 而不是从原始服务器获取 JSON 时违反了同源策略。然后我注意到 JQuery 的 $.getJSON 在 IE 上给出了一个常量 parseerror 。在使 JSON 数据通过原始服务器后，将其作为文本发送，使用 $.ajax 接收它并使用 $.parseJSON 解析它，图像地图坐标更新开始为适用于所有浏览器。
I have found a solution. The issue wasn't at all about DOM update of image map coordinates working only with some browsers.
I was breaking the same origin policy in trying to fetch JSON from Google, not from the original server. Then I noticed that JQuery's $.getJSON gave a constant parseerror on IE. After making JSON data to go through the original server, sent it as text, received it with $.ajax and parsed it with $.parseJSON the image map coordinates update started to work with all browsers.