真正的初学者对链接中的粗略艺术品提出质疑和道歉,但我很努力地在没有它的情况下表达清楚。此外,作为一个新的海报,我只限于每个问题的两个超链接,所以不要链接下面使用的代码。单击图像显示表
我有一个图像来放置触发点。点击触发器后,理想情况下会出现表格。例如,如果我点击屋顶,我想要一张桌子说屋顶是蓝色的,或者门的那个是红色的。
我一直在玩这些,但还没有任何成功。
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>
类卡在哪里开始,因此在正确的方向的任何指针将不胜感激。这就是图像看起来的样子,它应该如何呈现。
你可以发布一个[jsfiddle](https://jsfiddle.net/)它变得更清晰一些ppl – utdev
Daftly,我没有代码了,但我会考虑重做它不久。 – jdiawn1411