1

Tengo el siguiente problema.

Por ejemplo:

Quiero que al hacer clic en una imagen (dicha imagen tiene 3 carros, vista desde el cielo) al hacer clic en un carro quiero mostrar la información de dicho carro.

Cada carro tiene su coordenada (x,y) en la imagen.

Tengo pensado lo siguiente:

Poner un div transparente encima de imagen, y que ese div contenga una especie de botón encima de cada carro (dependiendo de la coordenada que ya sabría).

El problema: No se posicionarlo ya que, en html/css no se pocisiona por (x,y) (hasta donde se).

Hay alguna forma en que podria hacer esto, puede ser una conversion a algo que pueda solucionar este problema?

Alcides Salazar
  • 389
  • 4
  • 9
  • 22
  • Si creas un elemento con posición relativa y dentro de este creas los tres `div` con posición absoluta, mediante `top` (equvalente a `y`) y `left` (equivalente a `x`) puedes lograrlo ya que dichas coordenadas serán relativas al elemento que los contiene. [Mas info aquí](http://es.learnlayout.com/position.html). – Marcos Mar 01 '18 at 21:08
  • Puedes utilizar un elemento [`map`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map) –  Mar 01 '18 at 21:11
  • @Marcos En este caso como seria la medida en px o en %?? – Alcides Salazar Mar 02 '18 at 01:44
  • @AlcidesSalazar, dependiendo como hayas creado/calculado tus coordenadas. Normalmente seria en pixels, ya que suele ser la distancia desde el borde superior izquierdo. Supongamos que la foto mide `200x200` y que el "carro" esta desde `x:50;y:50`, lo que se traduce a `left:50px; top:50px` – Marcos Mar 02 '18 at 11:45
  • Relacionado: [¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?](https://es.stackoverflow.com/questions/37930/cual-es-la-diferencia-entre-position-relative-position-absolute-y-position) – Francisco Romero Mar 03 '18 at 09:38

2 Answers2

2

Si lo que quieres saber son las coordenadas de donde el usuario hace clic, usa las propiedades clientX y clientY del evento de onmousedown (ejemplo adaptado de https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX

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>

Por otro lado, si lo que quieres saber es si se hace clic en una región determinada de una imagen, usa map.

En el siguiente ejemplo si se hace clic del lado izquierdo se mostrará Izquierda, si se hace clic del lado derecho se mostrará Derecha.

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>

NOTA: El código anterior es una adaptación de https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

Rubén
  • 10,857
  • 6
  • 35
  • 79
1

Si se puede es muy fácil:

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

.car{
  position: absolute;
}

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

Ejemplo:

*{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>
Edgar Gutiérrez
  • 3,705
  • 10
  • 23
  • muy buena tu respuesta pero no me queda claro algo, como transformo la coordenada (x,y) de la imagen (.jpg, .png) a la de los botones? en este caso usas figure claro. Como seria su equivalente? Top seria Y y left X?? En porcentaje o pixel? – Alcides Salazar Mar 02 '18 at 01:42
  • Exacto: **Top: es Y** y **Left: X** puedes usar porcentajes o pixeles, eso lo decides tu por ejemplo si es responsive, % y si no pues en pixeles. ¿Alguna otra duda? – Edgar Gutiérrez Mar 02 '18 at 03:11
  • Muchas Gracias. No por ahora. – Alcides Salazar Mar 02 '18 at 14:15