[Javascript] Getting the X,Y coordinates of an image

[Chris Tifer]

Here's a function I use when I want to determine the cropping regions
of an image online. Pay particularly close attention to my do loop which
walks up the document tree from that point and checks the offsetLeft and
offsetTop which is always the distance from the parent element.  So, say you
had 3 tables, each inside the other, with an image in the last table...
It'll
take into account how far the offset is and add those values up until it
reaches the BODY - the last parent element.

Hope that helps,

Chris Tifer


-------------------------------

 function defineCropRegion(){
  var objForm = document.forms['imageForm']
  var objElX = objForm.elements['cropRegionX']
  var objElY = objForm.elements['cropRegionY']
  var objItem = document.getElementById("editImage")
  var objParent = null
  var intX = 0
  var intY = 0
  do
   { // Walk up our document tree until we find the body
    // and add the distance from the parent to our counter.
    intX += objItem.offsetLeft
    intY += objItem.offsetTop
    objParent = objItem.offsetParent.tagName
    objItem = objItem.offsetParent
   }
  while(objParent != 'BODY')


  var myScrollX
  var myScrollY
  (isIE) ? myScrollX = document.body.scrollLeft: myScrollX =
window.pageXOffset;
  (isIE) ? myScrollY = document.body.scrollTop: myScrollY =
window.pageYOffset;

  var intCRLeft = objCropRegion.offsetLeft - myScrollX
  var intCRTop = objCropRegion.offsetTop - myScrollY
  var intImgLeft = intX - myScrollX
  var intImgTop = intY - myScrollY




  objElX.value =  (intCRLeft - intImgLeft) + "," + ((intCRLeft +
objCropRegion.offsetWidth) - intImgLeft)
  objElY.value = (intCRTop - intImgTop) + "," + ((intCRTop +
objCropRegion.offsetHeight) - intImgTop)
  window.status = "Done"
 }

-------------------------------

 PS - It might not look like much, but this is a really cool script if you
saw it in action...
It highlights the image and when you are done selecting the region, I use
some
server-side component to crop the image. Works SWEET!!!!


----- Original Message -----
From: "DEV" <dev at qroute.net>
To: "[JavaScript List]" <javascript at LaTech.edu>
Sent: Wednesday, April 09, 2003 4:03 PM
Subject: [Javascript] Getting the X,Y coordinates of an image


> If I have an image like this
> <img id=image1 src='anImage.gif'>
>
> How do I get the top / left properties of that image relative to the
browser
> ?
>
> is there something like this such as
> alert(document.all.image1.top.value) ???
>
>
>
>
>
>
>
>
>
>
>
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>