0

Safari 4 には明らかにイメージマップに関する深刻なバグがあります。ページが 100% 以外にズームされると、クリック可能な領域が登録されなくなります。イメージ マップがほとんど使用できなくなります。

これは私のページではありませんが、問題を示しています。サファリでズームインまたはズームアウトしてから、シェイプをクリックします: http://www.elated.com/articles/creating-image-maps/

画像マップは土のように古く、それらを css 配置リンクに変更すると、非正方形の領域を持つことができなくなります。誰かが回避策を知っていますか?

4

1 に答える 1

1

バージョン4.0.4（5531.21.10）では、Safariマップの処理が正しく機能しません。

私も同じ問題を抱えています。部分的な解決策があります。

この問題を回避するために、JavaScriptを使用して新しい画像の寸法を取得し、領域の座標を取得、リファクタリング、および書き換えました。ページの読み込み時にこの関数を呼び出すと（以前にズームしたページでも）、画像マップを適切に処理できます。ただし、その後のページのズーム時に、変換が完了する前にマッピング機能が使用されている場合（たとえば、マウスがマップ上にある場合）、Safariは間違ったマップ座標を使用します。これは、ファイルをローカルにロードすることには明らかではありませんでしたが、無料の（そして遅い）サイトでホストされる画像をアップロードした後...

-> Safariに座標を再評価させる方法はありますか？

<！DOCTYPE HTML PUBLIC "-// W3C // DTD HTML 4.01 Transitional // EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<頭>
 <title>例</title>
 <script type = "text / javascript">
  global_areas = new Array（）;
  global_width = 1;
//
//この例では、次のことを前提としています。
// 1）ドキュメントに1つの画像マップがあります。
// 2）エリア座標はコンマで区切られ、
// 3）高さは幅と同じ量だけズームされています。
//
  function initglobal（）{//元のAREA座標文字列をロード時に呼び出されるグローバル配列に保存します
   var arrayAreas = document.body.getElementsByTagName（ "AREA"）;
   global_width = 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;
    alert（ "scale =" + scale）;  
    splitarray = global_areas [i] .split（ "、"）; //数値配列を設定します
    var tmparray = new Array（）;
    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;
   }
  }
 </ 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="マップテスト"usemap= "＃maptest" width = "800" height = "800" />
</ body>
</ html>
于 2010-03-10T07:15:20.097 に答える