CODEWITHSUNDEEP
javascriptjqueryhtml
Valla
Valla

Reputation: 2442

How to get the lower co-ordinate of images in html

I have a image and it is inside a div. I want to know what would be the lower co-ordinates for the image. Like if it a rectangle with corners A,B,C and D with A as the bottom left corner I want to get the co-ordinates of that. Could you let me know how I could achieve that using JavaScript or jQuery.

Upvotes: 3

Views: 112

Answers (4)

Stack
Stack

Reputation: 348

Here is the demo on codepen: http://codepen.io/ssh33/pen/AXdVER

Waits for the image to download to get the width and height and calls GetCoordinates().

If the image has been previously cached $("#image").load() will never fire. In this case $(window).load() will call GetCoordinates() instead. GetCoordinates() checks for non-numeric width/height and retrieves it if necessary.

Recalculates on window resize. 

var img_width, img_height, x, y;

$("#image").load(function() {
      img_width = this.width;   
      img_height = this.height;
});

var GetCoordinates = function(){
      if (isNaN(img_width) || isNaN(img_height)){
              img_width = $("#image").width();   
              img_height = $("#image").height();
      }

      var img_left = $("#image").offset().left;
      x = img_width + img_left;

      var img_top = $("#image").offset().top;
      y = img_height + img_top;
}  

$(window).load(function() {
      GetCoordinates(); 
});

$(window).resize(function() {
      GetCoordinates(); 
});

Upvotes: 1

Kld
Kld

Reputation: 7068

You can use .position() to get left and top coordinates(top left corner). to get the bottom left corner just add image height to top coordinate.

$(window).load(function(){ //to make sure all images are loaded
  console.log($('img').position().left);
  console.log($('img').position().top + $('img').height());
});
div { padding: 30px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="http://placehold.it/350x150"></div>

Upvotes: 1

Chris
Chris

Reputation: 1050

The best solution would be to use getBoundingClientRect()

var image = $( "img" );
var imageBounds = image.get(0).getBoundingClientRect();

var imageLeft = imageBounds.left;
var imageBottom = imageBounds.bottom;

Fiddle

But you could also use jQuery's .position() to get the top and left coordinates then to calculate the bottom and right position just add .height() or .width()

var image = $( "img" );
var imagePosition = image.position();
var imageHeight = image.height();

var imageLeft = imagePosition.left;
var imageBottom = imagePosition.top + imageHeight;

Fiddle

or without using jQuery:

var image = document.getElementById("image");
var imageBounds = image.getBoundingClientRect();

var imageLeft = imageBounds.left;
var imageBottom = imageBounds.bottom;

Fiddle

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122115

You can do this with JQuery position() and return left and top

var pos = $('img').position();
$('.result').append('(x: ' + pos.left + ', y: ' + pos.top + ')');
div {
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid black;
}
img {
  position: absolute;
  left: 40px;
  top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="http://placehold.it/50x50">
</div>
<span class="result"></span>

Upvotes: 1

Related Questions