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?

5
  • 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í.
    – Marcos
    el 1 mar. 2018 a las 21:08
  • Puedes utilizar un elemento map
    – user22721
    el 1 mar. 2018 a las 21:11
  • @Marcos En este caso como seria la medida en px o en %?? el 2 mar. 2018 a las 1: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
    el 2 mar. 2018 a las 11:45

2 respuestas 2

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

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>

3
  • 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? el 2 mar. 2018 a las 1: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? el 2 mar. 2018 a las 3:11
  • Muchas Gracias. No por ahora. el 2 mar. 2018 a las 14:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.