traitement de carte Safari ne fonctionne pas correctement pour moi dans la version 4.0.4 (5531.21.10).
Je suis le même problème. J'ai une solution partielle.
Pour tenter de contourner ce problème, j'ai javascript utilisé pour obtenir les nouvelles dimensions de l'image, puis de récupérer, refactoring et réécrire les coordonnées de la région. L'appel de cette fonction au chargement de la page (même une page préalablement agrandie) permet un traitement correct de l'image cliquable. Mais lors d'un zoomage ultérieur de la page, si la fonction de mappage est utilisée (par exemple, la souris survole la carte) avant que la transformation soit effectuée, Safari utilise les coordonnées de carte erronées. Ce n'était pas évident pour moi de charger le fichier localement, mais après avoir téléchargé les images à héberger sur un site libre (et lent) ...
-> Une idée pour obtenir que Safari réévalue les coordonnées?
<!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>
fonctionne bien pour moi dans la version 4.0.4 (6531.21.10, r52564) –