asked on

put image at x y coordinates

The following is a page called sample.html. When clicked it puts x and coordinates

form name='myform' action='sample.html' method='get'>
<input type='image' src='test.jpg' name='myimage' id='myimage'>
</form>
I need to draw another image on top at the x y coords

In sumary my goal is

1. have a background image
2. draw an image at where the person is clicked (x y)
3. allow person to keep clicking at a different location and then the image redraws at new location.

experts1

See example below:

<html>
<head>
<title>Position_window_On_Click</title>
<script language="javascript">
function goPos(zx) {
var new_x = parseInt(zx.clientX);
var new_y = parseInt(zx.clientY);
document.getElementById('div2').style.top = new_y;
document.getElementById('div2').style.left = new_x;
//alert(new_x + ' ' + new_y);
}
</script>
</head>
<body onclick="goPos(event)">
<form name='myform' action='sample.html' method='get'>
<div name="div1" id="div1" style="position: absolute;">
<input type='image' src='deddie.jpg' name='myimage' id='myimage'>
</div>
<div name="div2" id="div2" style="position: absolute;">
<input type='image' src='deddie.jpg' name='myimage1' id='myimage1'>
</div>
</form>
</body>
</html>

debbieau1

ASKER

Thansk a lot.

Hi it is close, but not quite. It does put the x y coords up as I need. I use one image as a background and one image on top to show where the user clicked.

When I click I want it to place the image at the xy position each time I click

<script language="javascript">
function goPos(zx) {
var new_x = parseInt(zx.clientX);
var new_y = parseInt(zx.clientY);
document.getElementById('div2').style.top = new_y;
document.getElementById('div2').style.left = new_x;
//alert(new_x + ' ' + new_y);
}
</script>
</head>
<a href="javascript: self.window.close()">BACK TO MAIN</a>
<body onclick="goPos(event)">
<form name='myform' action='head.html' method='get'>
<div name="div1" id="div1" style="position: absolute;">
<input type='image' src='background.jpg' name='myimage' id='myimage'>
</div>
<div name="div2" id="div2" style="position: absolute;">
<input type='image' src='top.png' name='myimage1' id='myimage1'>
</div>
</form>
</body>
</html>

debbieau1

ASKER

I realise I have something outside of the body tags which I fixed, but it doesnt appear the div2 is working

experts1

Like this?
This new mod will place background image where previous image was
and top image at new mouse cursor position.

<html>
<head>
<title>Position_window_On_Click</title>
<script language="javascript">
function goPos(zx) {
var new_x = parseInt(zx.clientX);
var new_y = parseInt(zx.clientY);
document.getElementById('div1').style.top = parseInt(document.getElementById('div2').style.top);
document.getElementById('div1').style.left = parseInt(document.getElementById('div2').style.left);
document.getElementById('div2').style.top = new_y;
document.getElementById('div2').style.left = new_x;
//alert(new_x + ' ' + new_y);
}
</script>
</head>
<body onclick="goPos(event)">
<form name='myform' action='sample.html' method='get'>
<div name="div1" id="div1" style="position: absolute;">
<input type='image' src='background.jpg' name='myimage' id='myimage'>
</div>
<div name="div2" id="div2" style="position: absolute;">
<input type='image' src='top.png' name='myimage1' id='myimage1'>
</div>
</form>
</body>
</html>

debbieau1

ASKER

thanks very much for sticking with this.

Now you are really close.

When I click, it does put put the top image at the location where I click, however ..

It only flashes it at the new location, but doesnt stay there. It jumps back to the original position.

debbieau1

ASKER

Just a bit more info

It should not show the top image, unless you have clicked the background image.

So on first load, the top image is not displayed, but as soon as you click (in other words as soon as the x y coords are in the url, then show the image)

experts1

What browser are you using to test?

Also, if you have other web browsers on your PC then
you might need to test the code in different browsers to
see / compare effect.

Then we could modify code to work for other browsers also.

debbieau1

ASKER

just a bit more info for you, that I have discovered. If I click away from the background image, the top image WILL stay at the cursor location but the background image moves also.

In summary I need to click the back image and the top image will appear at the x y location clicked

thanks

debbieau1

ASKER

I'm using firefox

I admire your dedication to this.

ASKER CERTIFIED SOLUTION

experts1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial