On-Click Image Display Table

Question

Real beginners question and apologies about the crude art in the link, but I'm struggling to articulate without it. Also, as a new poster, I'm limited to two hyperlinks per-question, so apologies for not linking the code I've used below.

I have an image to place trigger points on. After clicking on the trigger, a table would ideally appear. For example, if I click on the roof, I would like a table saying the roof is blue, or the door one saying it's red.

I've been playing around with each of these, but haven't had any success yet.

HTML Image Maps

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

CSS Left/Right Properties

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #8AC007;
}

div.absolute {
    position: absolute;
    right: 20px;
    width: 200px;
    height: 120px;
    border: 3px solid #8AC007;
} 
</style>
</head>
<body>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute. It is placed 20 pixels to the left of the right edge of the containing positioned element (div with class="relative").</div>
</div>

</body>
</html>

JQuery

$(function() {
$("#test").click(function(e) {
  var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
  alert(relativeX+':'+relativeY);
  $(".position").val("afaf");
});
});

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div class="position">Hello</div><br/><br/>
<div >
  <div>
    <div>
      <a id="test">
  <img class="demo-box" src="http://www.degordian.com/static/img/shareImg/degordian.png" />
      </a>
    </div>
    </div>
</div>
<br/><br/>Hello again<br/><br/>
<div >
  <img class="demo-box" src="http://www.degordian.com/static/img/shareImg/degordian.png" />
  
</div>

Kind of stuck on where to start, so any pointers in the right direction would be much appreciated. This is what the image would originnally looks like and this is how it should be rendered.

Original Image
Ideal View

Could you post a [jsfiddle](https://jsfiddle.net/) it becomes more clear for some ppl — utdev, Feb 22 '17 at 16:06
Daftly, I don't have the code anymore, but I'll look into redoing it soon. — jdiawn1411, Feb 22 '17 at 16:27

score 0 · Accepted Answer · edited May 23 '17 at 11:46

You can use your first sample and extend it with an event handler

(function(lastimg) {
  var links = document.querySelectorAll('area');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function(e) {
      if (lastimg) {
        lastimg.classList.toggle('show');
      }
      lastimg = document.querySelector('div[class^="' + e.target.getAttribute("alt") + '"]');
      lastimg.classList.toggle('show');
    })
  }
})()

div {
  display: none;
  padding: 20px;
}

div.show {
  display: block;
}

<!DOCTYPE html>
<html>

<body>

  <p>Click on the sun or on one of the planets to get more info:</p>
  <img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

  <map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun">
    <area shape="circle" coords="90,58,3" alt="Mercury">
    <area shape="circle" coords="124,58,8" alt="Venus">
  </map>

  <div class="Sun">Sun is....</div>
  <div class="Mercury">Mercury is....</div>
  <div class="Venus">Venus is.....</div>

</body>

</html>

Now, if you want to read data from an image, here is a solution already posted:

get-a-pixels-color-from-an-image

Thanks, this is a great start! – jdiawn1411 Feb 22 '17 at 16:55 — jdiawn1411, Feb 22 '17 at 16:55

score 0 · Answer 2 · answered Feb 22 '17 at 16:26

Tell me if i'm wrong.

What you want is just displaying a tag when you click on an interactive object ?

I just changed a bit your Javascript and added a class on your 3 planets :

var planets = document.getElementsByClassName('planet');

for(var i = 0; i < planets.length; i++){
  planets[i].onclick = addTag;
}

function addTag(event){
    var tag = document.createElement('div');
    tag.innerHTML = event.target.id;
    tag.className = "tag";
    document.body.append(tag);

    tag.style["position"] = "absolute";
    tag.style["background-color"] = "white";
    tag.style["border"] = "solid black 1px";
    tag.style["left"] = event.clientX + "px";
    tag.style["top"] = event.clientY + "px";

}

you can try it on this fiddle : https://jsfiddle.net/gabqm92y/

Sure you will have to adapte it a bit for your use case

Thanks for the answer, it was pretty similiar to what I was looking for. — jdiawn1411, Feb 22 '17 at 16:51

On-Click Image Display Table

2 Answers2