Question

真正的初学者对链接中的粗俗艺术提出质疑和道歉，但是如果没有它，我就会努力表达。另外，作为一张新的海报，我每个问题仅限于两个超链接，所以对于不链接我在下面使用过的代码表示道歉。

我有一个图像来放置触发点。点击触发器后，理想情况下会出现一个表格。例如，如果我点击屋顶，我想要一张桌子说屋顶是蓝色的，或者一扇门说它是红色的。

我一直在玩这些，但还没有取得任何成功。

HTML图片地图

<!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左/右属性

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

有点坚持从哪里开始，所以任何正确方向的指针都会非常感激。这就是图像最初的样子，这就是它应该被渲染的方式。

Original Image
Ideal View

Answer 1

您可以使用第一个示例并使用事件处理程序扩展它

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>

PORT="5678"

现在，如果您想从图像中读取数据，这里已经发布了一个解决方案：

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

Answer 2

告诉我，如果我错了。

您想要的只是在单击交互式对象时显示标记？

我刚刚更改了你的Javascript并在你的3个行星上添加了一个类：

where

你可以在这个小提琴上试试：https://jsfiddle.net/gabqm92y/

当然，你必须为你的用例调整一下

点击图像显示表

2 个答案: