單擊圖像顯示錶

真正的初學者對鏈接中的粗略藝術品提出質疑和道歉，但我很努力地在沒有它的情況下表達清楚。此外，作爲一個新的海報，我只限於每個問題的兩個超鏈接，所以不要鏈接下面使用的代碼。單擊圖像顯示錶

我有一個圖像來放置觸發點。點擊觸發器後，理想情況下會出現表格。例如，如果我點擊屋頂，我想要一張桌子說屋頂是藍色的，或者門的那個是紅色的。

我一直在玩這些，但還沒有任何成功。

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

來源

2017-02-22 jdiawn1411

你可以發佈一個[jsfiddle]（https://jsfiddle.net/）它變得更清晰一些ppl – utdev

Daftly，我沒有代碼了，但我會考慮重做它不久。 – jdiawn1411

您可以使用您的第一個樣品，並與一個事件處理程序，擴展它現在

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

，如果你想從讀數據圖像，這裏是已經發布的解決方案：

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

來源

2017-02-22 16:26:04 LGSon

謝謝，這是一個很好的開始！ – 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有點爲你的使用案例

來源

2017-02-22 16:26:29 Vashnak

感謝您的回答，它與我正在尋找的東西非常相似。 – jdiawn1411

單擊圖像顯示錶

回答

相關問題