使用 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);

使用 JavaScript 將圖像附加到 HTML 區域標簽

問題描述

2 個解決方案

解決方案1
1 2022-01-11 08:32:46

解決方案2
0 2017-07-02 14:37:26

使用 JavaScript 將圖像附加到 HTML 區域標簽

問題描述

2 個解決方案

解決方案1 1 2022-01-11 08:32:46

解決方案2 0 2017-07-02 14:37:26

解決方案1
1 2022-01-11 08:32:46

解決方案2
0 2017-07-02 14:37:26