Таблица отображения изображений на экране.

Настоящие новички задают вопрос и извиняются за грубое искусство в ссылке, но я изо всех сил пытаюсь сформулировать это без него. Кроме того, в качестве нового плаката я ограничиваюсь двумя гиперссылками на вопрос, поэтому приношу извинения за то, что вы не связывали код, который я использовал ниже.Таблица отображения изображений на экране.

У меня есть изображение для размещения точек запуска. После нажатия на триггер в идеале появится таблица. Например, если я нахожусь на крыше, я бы хотел, чтобы стол говорил, что крыша синяя, или дверь, говорящая, что она красная.

Я играл с каждым из них, но пока не добился успеха.

HTML Image Карты

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

Вид застрял на том, где начать, поэтому любые указатели в правильном направлении будет высоко ценится. Это то, что образ первоначально выглядит, и вот как это должно быть сделано.

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>

Теперь, если вы хотите прочитать данные из image, вот решение уже опубликовано:

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

Таблица отображения изображений на экране.

ответ

Смежные вопросы