Solved

HTML5 + get image location inside container

Posted on 2013-01-03
1
408 Views
Last Modified: 2013-01-24
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.
0
Comment
Question by:dkilby
1 Comment
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 38742595
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.
$(document).ready(function(){
	$("#printPositions").bind("click", function(){
		var listItem, liText;
		$("img").each(function(i){
			var imgPos = $(this).offset();
			listItem = document.createElement("li");
			liText = document.createTextNode("X=" + imgPos.left + " Y=" + imgPos.top);
			listItem.appendChild(liText);
			$("#positions").append(listItem);
		});
	});
});
</script>

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
100% tall div not scrollable on iPhone 3 21
Phone Does Not Abide By CSS Breakpoint For Navigation Controls 6 22
Javascript 2 28
CSS Style Effect 2 12
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question