Is it possible to convert html positioning to x, y coordinates?

Question

Is it possible to convert html positioning to x, y coordinates?

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I have the following problem.

For example:

I want to click on an image (this image has 3 cars, seen from the sky) when I click on a car I want to show the information of that car.

Each car has its coordinate (x, y) in the image.

I have thought about the following:

Put a div transparent on top of the image, and let that div contain a kind of button on top of each car (depending on the coordinate you already know).

The problem: Do not position it because, in html/css is not positioned by (x, y) (as far as it is).

Is there any way I could do this, can it be a conversion to something that can solve this problem?

javascript html5 css

asked by Alcides Salazar 01.03.2018 в 22:00

source

2 answers

2

If what you want to know are the coordinates where the user clicks, use the clientX and clientY properties of the onmousedown event (example adapted from link

function showCoords(evt) {
  alert(
    "clientX value: " + evt.clientX + "\n" +
    "clientY value: " + evt.clientY + "\n"
  );
}

div {
  border-style: solid;
  border-color: blue;
  text-align: center;
  height: 200px
}

<div onmousedown="showCoords(event)">
  <p>Para mostrar las coordenadas haga clic dentro del recuadro azul</p>
</div>

On the other hand, if what you want to know is if you click on a certain region of an image, use map.

In the following example, if you click on the left side, you will see Left, if you click on the right you will see Right.

var datos = document.getElementById('datos');
function left(){
  datos.innerHTML = 'Izquierda';
}

function right(){
  datos.innerHTML = 'Derecha';
}

map area {
  outline-color:red;
}

<map name="primary">
  <area shape="circle" coords="75,75,75" href="#" onClick="left()">
  <area shape="circle" coords="275,75,75" href="#" onClick="right()">
</map>
<img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic">
<div id="datos"></div>

NOTE: The above code is an adaptation of link

answered by 01.03.2018 в 22:15

error with MySQL: Invalid parameter number: number of bound variables does not match number of tokens Generate apk cordova

score 1 · Accepted Answer

If you can, it's very easy:

.container_principal{
  position: relative: /*O elemento referente para las coordenadas xy */
}

.car{
  position: absolute;
}

.car.xy1{
  left: 10%; /*Coordenada X*/
  top: 30px; /*Coordenada Y*/
}

Example:

*{box-sizing: border-box; margin: 0; padding: 0;}

:root{
  --car_img: url('https://image.freepik.com/iconos-gratis/coche-vista-cenital_318-681.jpg');
}

body{
  min-height: 100vh;
}

.container-cars{
  position: relative;
  min-height: 400px;
  background-color: whitesmoke;
}

.car{
  width: 2em;
  height: 4em;
  position: absolute;
  background-size: calc(100% - .5em) auto;
  background-position: center;
  background-image: var(--car_img);
  background-repeat: no-repeat;
}

.car::before{
  opacity: 0;
  text-align: center;
  min-width: 200%;
 content: 'click para + info';
 position: absolute;
 background: #111;
 color: #eee;
 font-size: 0.5em;
 font-family: arial;
 bottom: calc(100% + 0.5em); 
 display: inline-block;
 padding: 0.3em .5em;
 border-radius: 1em;
 left: 50%;
  transition: all ease .3s;
 transform: translateX(-50%) translateY(100%);
}

.car .info{
  opacity: 0;
  position: absolute;
  left: calc(100% + 1em);
  top: 50%;
  font-size: 0.8em;
  padding: 0.5em 1em;
  border-radius: .2em;
  font-family: arial;
  background: gray;
  color: white;  
  transition: all ease .3s;
  transform: translateX(-100%) translateY(-50%);
}

.car:focus{
  outline: none;
  box-shadow: inset 0 0 0 2px lime;
}

.car:focus .info{
  opacity: 1;
  transform: translateX(0%) translateY(-50%);
}

.car:hover::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0%);  
}

.xy1{
  left: 20%;
  top: 25%;
}

.xy2{
  left: 200px;
  top: 200px;
}

.xy3{
  left: 16em;
  top: calc(1em + 3vmin);
}

<div class="container-cars">

  <figure class="car xy1" tabindex="1">
    <figcaption class="info">contenido <em>oculto</em></figcaption>
  </figure>

  <figure class="car xy2" tabindex="2">
    <figcaption class="info"><b>contenido</b> oculto</figcaption>
  </figure>

  <figure class="car xy3" tabindex="3">
    <figcaption class="info">contenido <u>oculto</ul></figcaption>
  </figure>
  
</div>