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

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.
0
debbieau1
Asked:
debbieau1
  • 6
  • 4
1 Solution
 
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
 
debbieau1Author Commented:
I realise I have something outside of the body tags which I fixed, but it doesnt appear the div2 is working
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
experts1Commented:
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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