10

絶対配置を使用して、複数の画像を重ね合わせています。これらの画像は部分的に透明で、目に見える部分だけをクリックできるようにするための html がareaあります。mapjQuery では、areaタグにマウス イベントを追加しました。

これは 1 つの画像に対してはうまく機能します。mouseenter と mouseleave は、画像のマップされた部分が入力された場合にのみ起動します。

問題は、一番上の画像でしか機能しないことです。他のすべての場合、その上に別の画像があるため、イベントは発生せず、CSS ホバーは機能しません。areaこれは、が重なり合っておらずmap、 が画像の前にあるという事実にもかかわらずです。

ここに問題のデモがあります: http://markv.nl/stack/imgmap2/

4

4 に答える 4

9

すべての個々の画像の上に単一の完全に透明な画像を配置し、すべての画像マップ領域をその画像に添付することができます。これは、マウスイベントのキャプチャ要素として機能しますが、個々の画像をすべて変更することもできます。

于 2012-06-08T13:24:09.130 に答える
4

それは直接的な答え/解決策ではありません...

キャンバス/SVGを使って絵を描いてみませんか？タスクを簡単にするライブラリはたくさんあります。それらの1つはRaphaëlJSです（この例を確認してください）。このライブラリの利点は、マウスの双方向性を可能にすることです。

検討できるもう1つのライブラリはEaselJSですが、サポートされていないブラウザでは機能しない<canvas>ため、IE<9はサポートされていません。

于 2012-06-08T13:29:55.300 に答える
4

画像が重なっていない場合にのみ機能します (図を参照)。あなたの場合、すべての画像はまったく同じサイズで、互いに重なり合っています。ブラウザは画像を固体のオブジェクトとして扱うため (透過性については気にしません)、現在どの画像にカーソルを合わせたいかを判断する方法はありません。

  +-----------+-----------+
  |           |           |
  |   img1    |   img2    |
  |           |           |
  |           |           |
  +-----------+-----------+
  |           |           |
  |   img3    |   img4    |
  |           |           |
  |           |           |
  +-----------+-----------+

ただし、これを回避できます。

すべての領域を含む画像の 1 つで単一のイメージマップを使用するだけで、小さな JavaScript を使用して、他のすべての画像でホバー効果をトリガーできます。

$("area").hover(function(){
    var $target = $("#"+$(this).data("target")); // getting the target image
    $target.attr("src",$target.attr("src").replace("slice","slice-focus")); //replacing the src with the src of the hover image
},function(){
    var $target = $("#"+$(this).data("target"));
    $target.attr("src",$target.attr("src").replace("focus-","")); //revert the changes
});​

コードに基づく実際の例: jsFiddle-Demo

于 2012-06-08T13:35:36.067 に答える
1

バインドされた関数で onclick() イベントを持つ、高さと幅が固定された透明な div を宮殿にすることもできます。次のようなもの：

<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>
于 2012-06-10T15:53:11.683 に答える