HTML 无法让“target_blank”在图像映射中工作答案

【问题标题】：HTML can't get "target_blank" to work in an image mapHTML 无法让“target_blank”在图像映射中工作
【发布时间】：2017-05-14 16:48:58
【问题描述】：

我正在尝试创建一个图像地图，其格式设置为当点击地图上的某个区域时，浏览器会在新选项卡中打开所选链接。

我知道使用 target_blank 属性来执行此操作，并且当我将特定图像作为“按钮”时，此方法有效。但我不知道如何让它在图像映射上工作。

随附的代码可以作为图像映射正常工作，但我想包含在新选项卡中打开链接的功能。

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div>
       <map name="pdx">
         <area href="https://en.wikipedia.org/wiki/Main_Page" alt="wiki"
target="_blank" shape="rect" coords="300,200,400,800"> 
      </map>
   </div>
   <p>
       <img src="/1st-stark1852WebCover.jpg" width="1800" alt="pdx_1852"   usemap="#pdx"/>
   </p>
</body>
</html>

【问题讨论】：

实际的图像地图使用area 元素来定义点击敏感区域，而不是a。
奇怪的是也能正常工作。我尝试了和图像映射功能 - 只是编辑了代码来说明 - 它照常工作，但仍然不是。

标签： html target imagemap

【解决方案1】：

我无法使用您的图片，因为它不可用。

评论中提到的div中不要添加map，需要area标签，然后it works well。

此处带有带有随机矩形链接的 stackoverflow 图标。

  <div>
       <map name="pdx">
         <area href="https://en.wikipedia.org/wiki/Main_Page" alt="wiki"
target="_blank" shape="rect" coords="100,100,200,200"> 
      </map>
   </div>
   <p>
       <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" width="400" alt="pdx_1852"   usemap="#pdx"/>
   </p>

由于我不知道您在哪里运行它，请记住，您编写此类代码的某些游乐场（例如网站）会阻止链接工作。像这里一样……

      <div>
           <map name="pdx">
             <area href="https://en.wikipedia.org/wiki/Main_Page" alt="wiki"
    target="_blank" shape="rect" coords="100,100,200,200"> 
          </map>
       </div>
       <p>
           <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" width="400" alt="pdx_1852"   usemap="#pdx"/>
       </p>

【讨论】：

我该死的，它起作用了，但前提是“形状”紧跟在“区域”之后 - 当我先有区域 href 然后形状等时，它不起作用。谢谢！
只是为了证明你的假设是错误的，继续 jsfiddle 链接，你会发现情况并非如此。 xml 中的属性顺序根本不重要。
很奇怪。好吧，它现在有效，所以我很兴奋。我确实注意到我确实从链接的缓存副本中获得了一些静态信息，因此我必须清除浏览历史记录才能使其有时工作。另外我正在使用新城市，也许有一些我不知道的内置功能。无论如何，感谢您的帮助和样品！