1

このようなマップエリアを持ついくつかの画像図があります

画像エリア

そして、エリアゾーン内をクリックしたときに画像IDを取得する必要があります
.jsでカスタムエリア機能を実現せずに作成できますか?

UPD サンドボックス

UPD2が 2 番目に見つかりました。その他の問題です。最初のエリア ゾーン (赤)。2 番目の画像で覆われており、クリックできず、エリアの z-index が機能していません。

画像の問題

FINAL UPD
いくつかのオブジェクトをマッピングするための小さなカスタム関数を書きました。
多分それは誰かを助けるでしょう:
jsFiddle

4

3 に答える 3

1

これがあなたが探しているものであることを願っています

JS フィドルの例: http://jsfiddle.net/g5Dy3/44/

HTML

<img id="dotted" src="image1.jpg" usemap="#ballmap" alt="sample" />
<img id="solid" src="image2" usemap="#ballmap2" alt="sample" />

<map name="ballmap">
    <area shape="circle" coords="210,120,90" href="#" alt="dotted ball" title="dotted ball" onclick="clickedMe(this);">
</map>
<map name="ballmap2">
    <area shape="circle" coords="126,90,70" href="#" alt="solid ball" title="solid ball" onclick="clickedMe(this);">
</map>

JS

function clickedMe(item) {
    var mapName;
    mapName = $(item).parent().attr('name');
    $('img').each(function(){
        if($(this).attr('usemap') == '#'+mapName){
            alert($(this).attr('id'));            
        }       
    });
}
于 2012-11-26T20:26:15.197 に答える
1

jQueryを使用できると仮定すると、次のようになります。

<img id="planetsimg" src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" onclick="clicked(this)" alt="Sun" image-id="planetsimg">
  <area shape="circle" coords="90,58,3" href="mercur.htm" onclick="clicked(this)" alt="Mercury" image-id="planetsimg">
  <area shape="circle" coords="124,58,8" href="venus.htm" onclick="clicked(this)" alt="Venus" image-id="planetsimg">
</map>

<script>
function clicked(map) {
    var image = $('#' + $(map).attr('image-id'));
    alert('img ' + image + ' clicked map ' + $(map).attr('href'));

    return false; // Prevents href from opening normally. Return true if you want the link to open
</script>
于 2012-11-26T19:59:42.217 に答える
0

マップ自体ではなく、マップの領域 (画像) にクリックハンドラーを追加するだけです。

jQuery を使用している場合は、次のように実行できます。

$('map').find('area').each(function() {
  $(this).on('click',... 
});
于 2012-11-26T19:57:51.153 に答える