f1614304 f1614304 - 4 months ago 10
jQuery Question

append coordinates on to a div when clicked on image

when ever i hover over the image coordinates are displayed i would like to append those coordinates in a div is it possible

here is a fiddle of what i have so far
Fiddle

Jquery.js

$('.hover').mousemove(function(e){

var hovertext = $('.hover').attr('hovertext');
$('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
$('#hoverdiv').css('top',e.clientY).css('left',e.clientX);

}).$('#img').on('click', function () {
$('(' + e.clientX + ',' + e.clientY + ')').appendTo('#append');
}) .mouseout(function(){
$('#hoverdiv').hide();
});


index.html

<div id="hoverdiv"></div>
<img id="img" class="hover" src="Coordinates.svg.png" hovertext="" />

<div id="append">
</div>

Answer

I just updated your code a little bit and I hope it fulfills your requirements.

$('.hover').mousemove(function(e) {

  var hovertext = $('.hover').attr('hovertext');
  $('#hoverdiv').text('(' + e.clientX + ',' + e.clientY + ')').show();
  $('#hoverdiv').css('top', e.clientY).css('left', e.clientX);

}).mouseout(function() {
  $('#hoverdiv').hide();
});

$('#img').click(function(e) {
  $('#append').append('(' + e.clientX + ',' + e.clientY + ')');
});
#hoverdiv {
  display: none;
  position: absolute;
  font-size: 14px;
  background-color: #fff;
  color: #404040;
  padding: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<img id="img" class="hover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/2D_Cartesian_Coordinates.svg/376px-2D_Cartesian_Coordinates.svg.png" hovertext="" />

<div id="append">
</div>