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.
LVL 1
debbieau1Asked:
Who is Participating?
 
experts1Connect With a Mentor Commented:
Sorry, but just got a chance to get back here!

Check this code below:
(1) Clicking on background should hide foreground image.
(2) Just play around with idea to see what different results you get

<html>
<head>
<title>Position_window_On_Click</title>
<script language="javascript">
  var new_x;
  var new_y;
  var is_visible = false;

function goPos(zx) {
  if (is_visible) {
  new_x = parseInt(zx.clientX);
  new_y = parseInt(zx.clientY);
  document.getElementById("div2").style.visibility="visible";
  document.getElementById('div2').style.top = new_y;
  document.getElementById('div2').style.left = new_x;
alert('test');
   }else{
    is_visible = true;
  }
}

function rePosTop(x) {
  document.getElementById("div2").style.visibility="hidden";
  is_visible = false;
}
</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' onclick="rePosTop(event);">
</div>
<div name="div2" id="div2" style="position: absolute;">
<input type='image' src='top.png' name='myimage1' id='myimage1'>
</div>
</form>
</body>
</html>
0
 
experts1Commented:
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>
0
 
debbieau1Author Commented:
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>
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
debbieau1Author Commented:
I realise I have something outside of the body tags which I fixed, but it doesnt appear the div2 is working
0
 
experts1Commented:
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>
0
 
debbieau1Author Commented:
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.

0
 
debbieau1Author Commented:
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)
0
 
experts1Commented:
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.
0
 
debbieau1Author Commented:
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
0
 
debbieau1Author Commented:
I'm using firefox

I admire your dedication to this.
0
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.

All Courses

From novice to tech pro — start learning today.