使用 JavaScript 将图像附加到 HTML 区域标签

Question

我正在尝试将点击事件添加到地图上的 html 区域。 如果单击该区域，则图像应仅显示在该区域中。

例如：

<area alt="" id="santiago" title="santiago" href="#" shape="poly" coords="225,692,281,695,277,744,225,743" />

Javascript：

window.onload = function() {

  document.getElementById("santiago").addEventListener("click", function (e) {
      alert("CLICKED");
    var img = document.createElement('img');
    img.setAttribute('src', 'images/house.png');
    e.target.appendChild(img);
  });

};

如果单击该区域，则会显示警报消息，但不会显示图像。 但它似乎已加载，因为我可以在区域标签内的代码中找到图像。 有人可以帮忙吗？ 谢谢！

Answer 1

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style>
body {
  background-repeat: no-repeat;
  background-attachment: fixed; 
  overflow: hidden;
}
</style> 
</style>    
</head>


<body>

<div class "container">
    <div class "picture">
        <img id="mapImage" src="put_text_heatmap.jpg"  height="1036px" width="1237px" usemap="#map">
        <map id="mapMap" name="map">
          <area data-brand="Ajile" href="dashboard_images/9.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="127, 629, 283, 869">
          <area data-brand="Honey" href="dashboard_images/8.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="514, 842, 803, 1024">
          <area data-brand="Akkriti" href="dashboard_images/7.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="774, 265, 909, 409">
          <area data-brand="Cosmatics" href="dashboard_images/6.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="985, 809, 1139, 992">
          <area data-brand="Annabelle" href="dashboard_images/5.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="258, 442, 429, 584">
          <area data-brand="Sunglases" href="dashboard_images/4.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="827, 851, 980, 1033">
          <area data-brand="VanHeusen" href="dashboard_images/3.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="343, 611, 514, 753">
          <area data-brand="jealous" href="dashboard_images/2.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="500, 358, 595, 409">
          <area data-brand="Denim" href="dashboard_images/1.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="163, 879, 334, 999">
        </map>
        
    </div>
</div>


</body>
<script>
window.onload = function() {
      document.getElementById("mapMap").addEventListener("click", function (e) {
        var img = document.createElement('img'); 
        $("#snowballAppear")[0].appendChild(img);
      });
};
</script>
</html>

Answer 2

尝试这个

var img = document.createElement('img'); 
$("#santiago")[0].appendChild(img);