Взять координаты мыши RESPONSIVE (на разных экранах, в процентах или wv wh)

Question

Подскажите, как правильно по клику взять координаты мыши, привязанных к размеру экрана? например вот

на примере кончик конуса имеет разные координаты на десктопе и мобиле.

как сделать чтобы на всех устройствах я мог бы наложить div на координату конуса и она бы всегда там была?

картинка должна быть всегда width:100%; у неё ratio 16:9

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  

<style>
*{padding:0;margin:0;}
body
{
margin:0 auto;
text-align:center;
overflow-x: hidden;
}
#maindiv
{
margin:0 auto;
max-width:800px;
width:100%;
}
#gamediv
{

}

#imgdiv
{

}
#img
{
width:100%;
}
</style>
</head>
<body>
<div id="maindiv">


<div id="gamediv">

<div id="imgdiv">
<img id="img" src="https://vraki.net/sites/default/files/inline/images/11_102.jpg">
</div>



</div>


<div id="testa"></div>
</div>

<script>
$(document).click(function(getCurrentPos){
    var xCord = getCurrentPos.clientX;
    var yCord = getCurrentPos.clientY;

    var xPercent = xCord/window.innerWidth;
    var yPercent = yCord/window.innerHeight;
    document.getElementById('testa').innerHTML+=xPercent+" "+yPercent+"<br>\r\n";

});

</script>
</body>
</html>

Answer 1

Как-то давно писал, по просьбе знакомого.

Координаты выставляете вручную в процентах.

.img-marker {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

.img-marker img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border: 0;
  margin: 0;
}

.img-marker__item {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  cursor: pointer;
}

.img-marker__item::before,
.img-marker__item::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.img-marker__item::before {
  width: 6px;
  height: 6px;
  background: #f00;
  z-index: 2;
}

.img-marker__item::after {
  width: 12px;
  height: 12px;
  background: #fff;
  z-index: 1;
}

.img-marker__item-name {
  display: inline-block;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 0.35em 1em;
  box-sizing: border-box;
  transform: translate(20px, -50%);
  position: relative;
  visibility: hidden;
}

.img-marker__item-name::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right-color: rgba(0,0,0,0.75);
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
}

.img-marker__item:hover .img-marker__item-name,
.img-marker__item:active .img-marker__item-name {
  visibility: visible;
}

<div class="img-marker">
  <img src="//i.imgur.com/QWZlwq8.png"/>
  <div class="img-marker__item" style="left: 36%; top: 17%;">
    <div class="img-marker__item-name">Небо</div>
  </div>
  <div class="img-marker__item" style="left: 62%; top: 66%;">
    <div class="img-marker__item-name">Дерево</div>
  </div>
  <div class="img-marker__item" style="left: 81%; top: 85%;">
    <div class="img-marker__item-name">Земля</div>
  </div>
</div>

БЛОГ НА HUSL

Взять координаты мыши RESPONSIVE (на разных экранах, в процентах или wv wh)

Ответы (1 шт):