Append image to HTML Area tag with JavaScript

Question

I'm trying to add a click event to a html area on a map. If the area is clicked, a image should show up just in this area.

For example:

<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);
  });

};

The alert message is shown up if the area is clicked but the image won't show up. But it seems to be loaded because i can find the image in my code within the area tag. Can somebody help please? Thanks!

Have you tried appending the created element rather than the path for display? .appendChild(img); — NewToJS
– NewToJS, Commented Jul 2, 2017 at 14:31
hi, yes that's what i've tried before - changed the sample now. thanks — svb
– svb, Commented Jul 2, 2017 at 14:33
If somebody is going to have this problem again, there seem to be problems appending an image to the html area tag in general. I've used div containers now and of course it works this way. thanks to all! — svb
– svb, Commented Jul 10, 2017 at 11:31

24_saurabh sharma · Accepted Answer · 2022-01-11 08:32:46Z

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

FannyKaunang · Accepted Answer · 2017-07-02 14:37:26Z

0

try this

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

answered Jul 2, 2017 at 14:37

FannyKaunang

911 silver badge8 bronze badges

Collectives™ on Stack Overflow

Append image to HTML Area tag with JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related