关于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

Event Delegation

将<map>注册到click事件，然后安排if/else条件，以便<area>是唯一被认为被点击的标记。信息丢失所以我添加data-name和data-dom到每个<area>。 <area> href也准备跳到另一页。您不能将点击转移信息发送到<table>并转到另一个页面，您必须决定其中一个。所以href不再跳到页面，这是通过这样做完成的：href="#/"。

---

演示

详细信息在演示中注释注意：由于规模较小，<area>s 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>