0

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!

5
  • Have you tried appending the created element rather than the path for display? .appendChild(img); Commented Jul 2, 2017 at 14:31
  • hi, yes that's what i've tried before - changed the sample now. thanks Commented Jul 2, 2017 at 14:33
  • What is the console.log(e.target) output? Commented Jul 2, 2017 at 14:38
  • The output is the example html area tag you can see above Commented Jul 2, 2017 at 14:48
  • 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! Commented Jul 10, 2017 at 11:31

2 Answers 2

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>
Sign up to request clarification or add additional context in comments.

Comments

0

try this

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.