私は絶対位置を使って複数の画像を重ね合わせて配置しました。これらの画像は部分的に透過的で、可視部分のみをクリック可能にするhtml areaとmapを持っています。 jQueryでは、areaタグにマウスイベントを添付しました。絶対配置されたイメージエリアマップをマウスでクリック可能にする方法は？
これは1つのイメージに対してうまくいきます。マウスのEnterキーとマウスの押下は、イメージのマップされた部分が入力されたときだけ起動します。
問題は、上部の画像にのみ問題があることです。他のすべての場合、CSS Hoverの作業ではなく、イベントを起動しません。その上に別のイメージがあるためです。これは、areaが重複せず、mapが画像の前にあるという事実にもかかわらず。ここで
は、問題のデモです：http://markv.nl/stack/imgmap2/
あなたはすべての個々の画像の上に、単一の、完全に透明な画像を配置し、その画像にすべてのイメージマップ領域を添付することができます。マウスイベントのキャプチャエレメントとして機能し、個々の画像をすべて変更することができます。
詳しい説明はこの[** SO Answer **]（http://stackoverflow.com/a/9089386/1195891）で見ることができます。これは、[** SO Question **] ]（http://stackoverflow.com/q/9088931/1195891）ポスターが提案されました。 – arttronics
あなたが描画を行うにはキャンバス/ SVGを使用していないのはなぜそれは...
直接答え/ソリューションではありませんか？タスクを容易にするライブラリがたくさんあります。そのうちの1つはRaphaëlJSです（これはexampleにチェックしてください）。このライブラリの利点は、マウスインタラクティビティを可能にすることです。
もう1つのライブラリはEaselJSですが、<canvas>をサポートしていないブラウザでは機能しないため、IE < 9はサポートされていません。
このRaphaëlJS[Example]（http://raphaeljs.com/pie.html）は、OPのリンクされた例に非常に近いです。 – arttronics
画像が重なっていない場合にのみ機能します（図参照）。あなたの場合、すべての画像はまったく同じサイズであり、お互いに積み上げています。ブラウザはイメージをソリッドオブジェクトとして扱うので（透明性については気にしません）、どのイメージをどのように決定し、現時点でどのイメージにホバーしたいのですか？
+-----------+-----------+
| | |
| img1 | img2 |
| | |
| | |
+-----------+-----------+
| | |
| img3 | img4 |
| | |
| | |
+-----------+-----------+
しかし、あなたがこの問題を回避することができます
ただ、すべての領域が含まれている画像の一つ上の単一のイメージマップを使用して、少しの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
jsFiddleのデモ用に+1してください。 – arttronics
することはできバインドさ機能付きのonclick（）イベントを持つことになり、固定高さと幅とも宮殿透明のdiv。何かのように：
<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>
複数のイメージを重ねる特別な理由はありますか？なぜ、1つのレイヤーにすべてを分けて表示しないのですか？ –
質問してください。 – Christoph
私は質問を追加しました。ホバー上の個々の画像を変更したいので、1つの画像を使用することはできません。 – Mark