关于html usemap的一些信息

Question

这是我的网页。第一张图片是用usemap制作的，我为每个人制作了一个区域。当我单击每个按钮时，它会将描述加载到另一个选项卡中，而我不希望这样。

那么，我可以在这张照片上的click事件中，在底部的表格中加载男人的描述和名字吗？

<img src="http://mythologica.ro/wp-content/uploads/2017/10/zei-egipteni2-1280x640.jpg" style="height:60%; width:80%" alt="zeii" usemap="#mapazei">

<map name="mapazei">
  <area shape="rect" coords="50,80,280,605" alt="primu" href="1.html">
  <area shape="rect" coords="300,80,500,605" alt="primu" href="2.html">
  <area shape="rect" coords="490,80,680,605" alt="primu" href="3.html">
  <area shape="rect" coords="680,80,830,605" alt="primu" href="4.html">
  <area shape="rect" coords="840,80,1030,605" alt="primu" href="5.html">
  <area shape="rect" coords="1050,80,1230,605" alt="primu" href="6.html">
</map>

<table border="1">
  <tr>
    <td width="20%">name</td>
    <td width="80">description</td>
  </tr>
</table>

由于我保存在PC上的照片具有不同的分辨率，因此此代码中的坐标可能不起作用。

Answer 1

事件委托

将<map>注册到click事件中，然后安排if/else有条件的条件，以便<area>是唯一被认为被单击的标记。信息丢失了，所以我向每个data-name添加了data-dom和<area>。 <area> href也被设置为跳到另一页。您无法将点击转移信息发送到<table>并转到另一页，您必须决定一个或另一个。因此href不再跳转到页面，这是通过执行以下操作来完成的：href="#/"。

---

演示

详细信息在演示中被评论 注意：由于规模较小，<area>个rect是重叠的，因此请整页查看。

// Reference the <map> 
var map = document.querySelector('map');

// This is the Event Handler - passing the Event Object
function identify(event) {
  // Clicked element (i.e. <area>)
  var eTgt = event.target;
  // Registered element (i.e. <map>)
  var eCur = event.currentTarget;

  /*
  if clicked element is NOT the registered element...
  */
  if (eTgt !== eCur) {
    // if the clicked element is an <area>...
    if (eTgt.tagName === "AREA") {
      // Get its data-name...
      var name = eTgt.dataset.name;
      //...and data-dom
      var domain = eTgt.dataset.dom;
      // Reference the <table>
      var table = document.querySelector('table');
      // Locate the appropriate <td>
      var nameCell = table.rows[1].cells[0];
      var domCell = table.rows[1].cells[1];
      // Change the <td> content to the associated values
      nameCell.textContent = name;
      domCell.textContent = domain;
    }
  }
}

/*
Register the <map> to the click event...
when clicked event handler function identify() is called
*/
map.onclick = identify;

<img src="http://mythologica.ro/wp-content/uploads/2017/10/zei-egipteni2-1280x640.jpg" style="height:65.25%; width:100%" alt="zeii" usemap="#mapazei">

<map name="mapazei">
		<area href="#/" shape="rect" coords="50,80,280,605" alt="primu" data-name='Bast' data-dom='Goddess of Cats'>
    
		<area href="#/" shape="rect" coords="300,80,500,605" alt="primu" data-name='Isis' data-dom='Goddess of Fertility'>
    
		<area href="#/" shape="rect" coords="490,80,680,605" alt="primu" data-name='Ra' data-dom='God of the Sun'>
    
		<area href="#/" shape="rect" coords="680,80,830,605" alt="primu" data-name='Horus' data-dom='God of the Sky'>
    
		<area href="#/" shape="rect" coords="840,80,1030,605" alt="primu" data-name='Hathor?' data-dom='?'>
    
		<area href="#/" shape="rect" coords="1050,80,1230,605" alt="primu" data-name='Anubis or Set?' data-dom='God of the Dead or Evil'>
		</map>

<table border="1" style='transform:translateY(-50px)'>
  <tr>
    <th width="20%">Name</th>
    <th width="80">Description</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>