• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 419
  • Last Modified:

HTML5 + get image location inside container

Is there a way to loop through all the images inside a container and get their location, the X and Y of each image?

I want to get the coordinates from a click of a button, the images are draggable, so once the button is clicked i want to see this info.
1 Solution
Tom BeckCommented:
By way of example, you could add a <ol> and a button to your page:

<input type="button" id="printPositions" value="Print Image Positions" />
<ol id="positions"></ol>

Then use jquery to print out the positions of each image on the page. This would be X and Y coordinates relative to the document edges. You could also make it relative to a container's edges.
	$("#printPositions").bind("click", function(){
		var listItem, liText;
			var imgPos = $(this).offset();
			listItem = document.createElement("li");
			liText = document.createTextNode("X=" + imgPos.left + " Y=" + imgPos.top);

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now