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.
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.