6

Quiero que al pinchar en la pantalla me coja las coordenadas y esas coordenadas se coloque como valor para el margin-left. este es mi código javascript.

function coordenadas(event) {
 x=event.clientX;
 y=event.clientY;
 document.getElementById("#img").style.marginLeft=x;
 alert("X: "+x+"px Y: "+y);

}
3
  • ¿Quieres que según donde tengas el cursor se le añada un margin left a tu imagen?
    – Jorius
    Commented el 30 mar. 2017 a las 14:57
  • si por ejemplo al pinchar me sale 400 en el alert que tengo puesto pues el margin left sea 400. Commented el 30 mar. 2017 a las 15:00
  • he publicado una respuesta, dale un vistazo, espero te sea útil
    – Jorius
    Commented el 30 mar. 2017 a las 15:10

4 respuestas 4

3

Creo que esto es lo que quieres

var cat = document.getElementById('img');

function showCoords(event) {
  cat.style.marginLeft = event.clientX + 'px';
}
.container {
  width: auto;
  height: auto;
  border: 1px solid black;
  padding: 5px 0px 0px 5px;
}

#img {
  width: 100px;
}
<div class="container" onclick="showCoords(event)">
  <img id="img" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" />
</div>

4
  • si exactamente pero la función sería onclick.Voy a probar. Commented el 30 mar. 2017 a las 15:12
  • Listo, he editado mi respuesta, revisala de nuevo :D !
    – Jorius
    Commented el 30 mar. 2017 a las 15:13
  • muchas gracias. Commented el 30 mar. 2017 a las 15:17
  • 1
    @BorjaSanchez recuerda marcar como aceptada la respuesta ;) ambos ganais rep
    – lois6b
    Commented el 30 mar. 2017 a las 15:17
2

Podrias hacer lo siguiente:

  • Posicionar absolutamente la imagen (eg: position: absolute).
  • Suscribirte al evento click del document para obtener las coordenadas
  • Establecer el margin-left respecto de la coord X

Ejemplo:

var img = document.getElementById('image');
document.addEventListener('click', function(evt) {
  // Coord X - Margen izq
  img.style.marginLeft = evt.clientX + 'px';
  // Coord Y - Margen top y sumamos la mitad de la altura de la imagen
  img.style.marginTop = evt.clientY + (img.offsetHeight / 2) + 'px';
});
* {
  margin: 0;
  padding: 0;
}
#image {
  position: absolute;
  width: 25px;
  top: -25px;
}
<img id="image" src="https://image.flaticon.com/icons/svg/17/17264.svg" />

5
  • No sé si es problema solamente mío pero no se me ejecuta nada en tu snippet :c
    – Jorius
    Commented el 30 mar. 2017 a las 15:19
  • Si, pero no pasa nada, probaré desde firefox a ver
    – Jorius
    Commented el 30 mar. 2017 a las 15:20
  • google chrome desde ubuntu
    – Jorius
    Commented el 30 mar. 2017 a las 15:22
  • desde el firefox funciona y el chromium también, jaja, es raro, deben ser cookies, cache o algo por estilo
    – Jorius
    Commented el 30 mar. 2017 a las 15:22
  • raro, o a lo mejor el https en el src de la imagen...
    – Marcos
    Commented el 30 mar. 2017 a las 15:23
2

Aqui tienes para que con el click se mueva.

Cambia el div por tu imagen.

Recoge la posicion del raton con el evento click y lo asigna al estilo del elemento, imagen en tu caso.

var mouseX = 0, 
    follower = document.getElementById("follower");


document.onclick = function(e){
   mouseX = e.pageX;

   follower.style.marginLeft = mouseX + 'px';
};
#follower{
  position : absolute;
  background-color : red;
  color : white;
  padding : 10px;
}

body{width:100%;height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="follower">Imagen</div>

0
2

Bueno me parece que lo que tienes ya es suficiente, agrego lo que hace falta para que lo veas funcional. Basta con agregar el event listener y ajustar el margin left en pixels con el valor deseado.

(function(window){
  window.addEventListener('click', function( event ) {
    var x=event.clientX,
        y=event.clientY;
        img = document.getElementById("img").style.marginLeft=x + "px";
  });  

})(window);
img{
  width: 150px;
  height: 100px;
}
<img id="img" src="https://assets.entrepreneur.com/content/16x9/822/20141230193127-work.jpeg" alt="dev">

1
  • 2
    Hola julian, te recomiendo usar el snippet de js incluido en las preguntas y asi te ahorras el ir a otro servicio de snippets online hehe
    – lois6b
    Commented el 30 mar. 2017 a las 15:26

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.