getting X and Y coordinates of clicked object

[southbeach]

Working on a page where I display a table grid. One of the options on the grid is to play a sound track. As of now, I got it to work fine but I am placing the MP3 player once for every possible sound track on the page.

I want to change this. I want to provide an image and apply the following

1. When PLAY image is clicked, swap image to STOP image
2. Call AJAX+PHP script to open MP3 player
3. MP3 player should open just below the row where the PLAY image was clicked

I have no problem with 1 and 2. I figure I need X and Y coordinates of the PLAY image so that I can open a LAYER or CONTAINER using absolute positioning.

This brings me to the next question
1. How do I change the style properties on the LAYER so that it is placed according to the captured X.Y coordinates?

The container will have a fixed ID

<div id="trackplayer"></div>

<style>
div#trackplayer {
position: absolute;
z-index: 20;
}

the top: and left: or margin: properties will need to change dynamically.

Any ideas?

Thank you all in advance for your assistance!


--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[southbeach]

Well, it looks like these are the start towards a solution

<script type="text/javascript">
	function showXY(e) {
		alert('Mouse X: '+tempX+'  Mouse Y: '+tempY);
		return true;
	}
</script>
<script language="JavaScript1.2">
	<!-- Original:  CodeLifter.com (support@codelifter.com) -->
	<!-- Web Site:  [URL unfurl="true"]http://www.codelifter.com[/URL] -->
	
	<!-- This script and many more are available free online at -->
	<!-- The JavaScript Source!! [URL unfurl="true"]http://javascript.internet.com[/URL] -->
	
	<!-- Begin
	var IE = document.all?true:false;
	if (!IE) document.captureEvents(Event.MOUSEMOVE)
	document.onmousemove = getMouseXY;
	var tempX = 0;
	var tempY = 0;
	function getMouseXY(e) {
		if (IE) { // grab the x-y pos.s if browser is IE
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
		}
		else {  // grab the x-y pos.s if browser is NS
		tempX = e.pageX;
		tempY = e.pageY;
		}  
		if (tempX < 0){tempX = 0;}
		if (tempY < 0){tempY = 0;}  
		return true;
	}
	//  End -->
</script>

Now off to find out how to change the left: and top: properties of my container element.



--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.