web-dev-qa-db-ja.com

イメージマップエリア要素でonclickイベントを使用できますか

Area要素にonclickイベントを配置したいと思います。私のセットアップは次のとおりです。

<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
    <map name="Map">
    <area class="blue" onclick="myFunction()" shape="poly" coords="2318,480,1510,1284" href="#">
</map>

Onclickイベントを使用する2つの異なる方法を試しました。最初に私はこれを試しました：

$(".blue").click( function(event){
    alert('test');
});

私もこれを試しました：

function myFunction() {
    alert('test');
}

上記のどちらも機能しません。エリア要素は上記をサポートしていますか、それともhrefのサポートのみをサポートしていますか？

前もって感謝します！

javascriptjqueryonclickareaimagemap
24
danyo

注意を払う：

  1. 属性hrefは必須です。それなしでは、area-tagは何もしません！

  2. クリックイベントを追加するには、デフォルトのhrefをブロックする必要があります。

コードは次のように開始する必要があります。

$(".blue").on("click", function(e){
    e.preventDefault();
    /*
       your code here
    */
});

実際の例はこちら

28
user4227915

問題の形状です。コードの形状は多角形に等しく設定されていますが、座標属性には4ポイントしかありません。代わりに、シェイプを長方形に設定する必要があります。

次のようにshape = "rect"を設定します。

<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" > <map name="Map"> <area class="blue" onclick="myFunction()" shape="rect" coords="2318,480,1510,1284" href="#"> </map>

3
treeFan

あなたのコメントに基づいて、あなたはこれが必要です：

$("#image").click( function(){
 alert("clicked");
//your code here
});

デモ：

http://codepen.io/tuga/pen/waBQBZ

2
Pedro Lobito

試してください：

<img  src="wheel.png" width="2795" height="2795" alt="Weels" usemap="#map">

<map name="map">
 <area shape="poly" coords="2318,480,1510,1284" alt="otherThing" href="anotherFile">
</map>

あなたはonClickイベントをエリア、ドキュメントに追加したくありません：

タグは、イメージマップ内の領域を定義します（イメージマップは、クリック可能な領域を持つ画像です）。

編集：あなたの座標は、各頂点のカップルに想定されているため、少し奇妙です（したがって、現在、ポリゴンは線です）

1
Jules

リッスンするすべての要素にクラスを使用し、オプションで動作の属性を使用します。

<map name="primary">
  <area shape="circle" coords="75,75,75" class="popable" data-text="left circle text">
  <area shape="circle" coords="275,75,75" class="popable" data-text="right circle text">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">
<div class='popup hidden'></div>

次に、クラス内のすべての要素にイベントリスナーを追加します。

const popable = document.querySelectorAll('.popable');
const popup = document.querySelector('.popup');
let lastClicked;

popable.forEach(elem => elem.addEventListener('click', togglePopup));

function togglePopup(e) {
  popup.innerText = e.target.dataset.text;

  // If  clicking something else, first restore '.hidden' to popup so that toggle will remove it.
  if (lastClicked !== e.target) {
    popup.classList.add('hidden');
  }
  popup.classList.toggle('hidden');
  lastClicked = e.target;  // remember the target
}

デモ： https://codepen.io/weird_error/pen/xXPNOK

1
weird_error

これは簡単なものです：

<area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#">
<area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#">
0
TimorEranAV

@TimorEranAVでこの質問を見つけました RLにリンクする代わりにテキストを表示するHTMLマップ と重複としてマークされましたが、彼が期待していたのはこれだと思います、

<html>
<head>
 <title> Program - Image Map</title>
</head>
<body>


 <img src="new.png" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="Sun.htm" alt="Sun" title = "Sun">
  <area shape="rect" coords="82,0,100,126" href="mercur.htm" alt="Mercury" title = "Mercury">

</map>

</body>
</html>

ここで、タイトルタグは、ホバーテキスト（ヒント）をイメージマップに追加する機会を提供します。

0
MLPJ