单击图像显示表
真正的初学者对链接中的粗略艺术品提出质疑和道歉,但我很努力地在没有它的情况下表达清楚。此外,作为一个新的海报,我只限于每个问题的两个超链接,所以不要链接下面使用的代码。单击图像显示表
我有一个图像来放置触发点。点击触发器后,理想情况下会出现表格。例如,如果我点击屋顶,我想要一张桌子说屋顶是蓝色的,或者门的那个是红色的。
我一直在玩这些,但还没有任何成功。
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>
类卡在哪里开始,因此在正确的方向的任何指针将不胜感激。这就是图像看起来的样子,它应该如何呈现。
您可以使用您的第一个样品,并与一个事件处理程序,扩展它现在
(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>
,如果你想从读数据图像,这里是已经发布的解决方案:
谢谢,这是一个很好的开始! – jdiawn1411
告诉我,如果我错了。
你想要的只是当你点击一个交互式对象时显示一个标签吗?
我只是改变了一下你的Javascript和你的3个行星增加了一个类:
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";
}
你可以尝试在此琴:https://jsfiddle.net/gabqm92y/
当然,你将不得不adapte有点为你的使用案例
感谢您的回答,它与我正在寻找的东西非常相似。 – jdiawn1411
你可以发布一个[jsfiddle](https://jsfiddle.net/)它变得更清晰一些ppl – utdev
Daftly,我没有代码了,但我会考虑重做它不久。 – jdiawn1411