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