blocks|key|4511665|text|形状才是问题所在。您的代码已将形状设置为多边形，但在坐标属性中只有4个点。您需要将形状设置为矩形。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4511666|设置shape="rect“，如下所示：|4511667|<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>|code-block|syntax|javascript|4511668|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Its the shape that's the problem. Your code has set shape equal to polygon but only has 4 points in the coordinates attribute. You need to set shape to rectangle instead.</p>
<p>Set shape=&quot;rect&quot; like this:</p>
<pre class="lang-html prettyprint-override"><code>&lt;img id=&quot;image&quot; src=&quot;wheel.png&quot; width=&quot;2795&quot; height=&quot;2795&quot; usemap=&quot;#Map&quot; &gt;
    &lt;map name=&quot;Map&quot;&gt;
    &lt;area class=&quot;blue&quot; onclick=&quot;myFunction()&quot; shape=&quot;rect&quot; coords=&quot;2318,480,1510,1284&quot; href=&quot;#&quot;&gt;
&lt;/map&gt;
</code></pre>


blocks|key|4117|text|我通过@TimorEranAV+HTML+map+that+displays+text+instead+of+linking+to+a+URL发现了这个问题，并被标记为重复的，但我认为他所期待的是这样的，|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4118|<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>|code-block|syntax|javascript|4119|在这里，title标记提供了向图像映射添加悬停文本(提示)的机会。|4120|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/46574216/html-map-that-displays-text-instead-of-linking-to-a-url^0|G|1J|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>I found this question by @TimorEranAV 
<a href="https://stackoverflow.com/questions/46574216/html-map-that-displays-text-instead-of-linking-to-a-url">HTML map that displays text instead of linking to a URL</a>
and was marked as duplicate, but i think what he was expecting is this,</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
 &lt;title&gt; Program - Image Map&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;


 &lt;img src="new.png" width="145" height="126" alt="Planets" usemap="#planetmap"&gt;

&lt;map name="planetmap"&gt;
  &lt;area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" title = "Sun"&gt;
  &lt;area shape="rect" coords="82,0,100,126" href="mercur.htm" alt="Mercury" title = "Mercury"&gt;

&lt;/map&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Here the title tag gives the opportunity to add a hover text(tip) to the image map.</p>


blocks|key|4136|text|为要侦听的所有元素使用一个类，并可选择为行为使用一个属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4137|<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>|code-block|syntax|javascript|4138|然后将事件侦听器添加到类中的所有元素：|4139|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
}|4140|演示：https://codepen.io/weird_error/pen/xXPNOK|offset|length|4141|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/weird_error/pen/xXPNOK^0|0|0|0|0|3|15|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>Use a class for all elements you want to listen on, and optionally an attribute for behavior:</p>

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

<p>Then add your event listeners to all elements in the class:</p>

<pre><code>const popable = document.querySelectorAll('.popable');
const popup = document.querySelector('.popup');
let lastClicked;

popable.forEach(elem =&gt; 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
}
</code></pre>

<p>Demo: <a href="https://codepen.io/weird_error/pen/xXPNOK" rel="nofollow noreferrer">https://codepen.io/weird_error/pen/xXPNOK</a></p>


blocks|key|4511741|text|这是一个简单的例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4511742|​|4511743|<area+class="blue"+onclick="alert('test');"+shape="poly"+coords="2318,480,1510,1284"+href="#">|code-block|syntax|javascript|4511744|或任何其他代码：|4511745|4511746|4511747|<area+class="blue"+onclick="//JavaScript+Code//"+shape="poly"+coords="2318,480,1510,1284"+href="#">|4511748|4511749|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|U|8|@]|9|@]|A|$]]|$1|K|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

<p>This is a simple one:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#"&gt;</code></pre>
</div>
</div>

Or for any other code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#"&gt;</code></pre>
</div>
</div>
</p>


<p>I would like to put an onclick event on an area element. Here is my setup:</p>
<pre><code>&lt;img id=&quot;image&quot; src=&quot;wheel.png&quot; width=&quot;2795&quot; height=&quot;2795&quot; usemap=&quot;#Map&quot; &gt;
    &lt;map name=&quot;Map&quot;&gt;
    &lt;area class=&quot;blue&quot; onclick=&quot;myFunction()&quot; shape=&quot;poly&quot; coords=&quot;2318,480,1510,1284&quot; href=&quot;#&quot;&gt;
&lt;/map&gt;
</code></pre>
<p>I have tried 2 different ways to have an onclick event. Firstly i tried this:</p>
<pre><code>$(&quot;.blue&quot;).click( function(event){
    alert('test');
});
</code></pre>
<p>I have also tried this:</p>
<pre><code>function myFunction() {
    alert('test');
}
</code></pre>
<p>Neither of the above work. Do area elements support the above, or do they only support having a href?</p>


Can I have an onclick event on a imagemap area element?

我想在一个area元素上放一个onclick事件。下面是我的设置：<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >    <map name="Map">    <area class="blue" onclick="m...

问我可以在imagemap area元素上有onclick事件吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在imagemap area元素上有onclick事件吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在imagemap area元素上有onclick事件吗？
EN