Can I simulate a click on a web page at any given coordinate (X,Y position) ?

I have the following information:
A) a bunch of information in HTML
B) the browser width in pixels
C) the X/Y coordinate that the users wants to click on

Can I insert script (preferably fired by the onLoad event) into the HTML so that a click is simulated?

The user might be clicking a link, or trying to focus the mouse on a form input field, or pressing a button, or whatever - I don't know what in advance - only the X,Y coordinate.

In case you're wondering why - I have an archive of web page thumbnails (the HTML together with a "screen-shot" GIF image) and I want to make them "functional" when clicked.  This is the component I used to capture the GIF of the page: http://www.guangmingsoft.com/htmlsnapshot/help.htm

If you know for sure that this is impossible, please say (if you can explain why, that would be nice too :-)
LVL 2
ChrisDrakeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
<form action="someAction.pl">
<input type="image" src="snapshot.jpg">
</form>

will send x=324,y=483 to someAction if the user clicks on pos 324x483

Michel
0
ChrisDrakeAuthor Commented:
Yes - that's right.

My "someAction.pl" will then return to the browser the original HTML that produced snapshot.jpg along with some extra javascript code - the javascript code will re-size the window to the dimentions that the snapshot were taken in, then (and this is the bit I don't know how to do) - it needs to simulate a mouse click at 324x483

Obviously I'll need to "un-scale" my snapshots to work out what the real X,Y coordinates will be, so for the sake of this exercise, just pretend that the snapshot is not scaled down in any way and pretend I can use X,Y as they are.
0
Michel PlungjanIT ExpertCommented:
That is not afaik possible

What you need to do is to find what it was under the mouse
If a form button:
document.forms[0].button1.click()

or a link:
document.links[12].click()

but if you could make the browser click anywhere, it would be a security problem

Michel
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ChrisDrakeAuthor Commented:
Obviously I mean only to click someplace within the browsers client area (ie: on the web page it's displaying).

It's not a security problem to click anyplace on a web page.

(Assuming Microsoft has fixed most of it's bugs by now :-)

I don't know any way to do this, and google didn't tell me either... it's always hard trying to find how to do something that's impossible, because nobody says it's impossible, so you just have to keep looking until you give up:-)

Every now and then however, I do manage to solve "impossible" problems (like my last one: manually creating a "system-restore-point" - it only took me 3 lines of vbscript - and although nobody else in the world seems ever to have done this (according to google) I did work it out after a day of sleuthing...)

I live in hope :-)
0
dakydCommented:
Not sure if this is the sort of thing you're looking for, but will this help?  It's not meant to be efficient, because it has to do a depth-first search of all the elements on the page, and then figure out the x and y coordinates of that element.  But for a page that's fairly small or simple, like the sample below, you shouldn't notice a performance degradation.  Also, the pixel start and end values that I put for the divs are pretty close, but with the different box models, they won't necessarily be exact.  So try value that are closer to the center of the divs.  Anyhow, hope that helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
div {
  border: 1px solid blue;
}

#outer {
  position: relative;
  width: 200px;
  height: 200px;
  left: 10px;
  top: 10px;
}

#inner {
  position: relative;
  width: 125px;
  height: 125px;
  left: 30px;
  top: 20px;
}

#separate {
  position: absolute;
  top: 50px;
  left: 400px;
  width: 100px;
  height: 100px;
}

#theRest {
  position: relative;
  top: 20px;
  border: 0;
}

fieldset {
  padding: 0;
  width: 250px;
}
</style>
<script type="text/javascript">
function showYourself(e)
{
  alert("you clicked on div with and id of:\n" + this.id);
  if (window.event)
    window.event.cancelBubble = true;
  else
    e.stopPropagation();
}

function getX(obj)
{
  var temp = obj;
  var left = 0;
  while (temp.offsetParent)
  {
    left += temp.offsetLeft;
    temp = temp.offsetParent;
  }
  return left;
}

function getY(obj)
{
  var temp = obj;
  var top = 0;
  while (temp.offsetParent)
  {
    top += temp.offsetTop;
    temp = temp.offsetParent;
  }
  return top;
}

function doTheClick(xId, yId)
{
  x = parseInt(document.getElementById(xId).value);
  y = parseInt(document.getElementById(yId).value);

  var obj = findIfExists(document.body);
  if (obj != null)
  {
    if (obj.tagName.toLowerCase().indexOf("input") > - 1 &&
        obj.type == "button")
      obj.click();
    else if (obj.tagName.toLowerCase().indexOf("a") > -1)
      document.location = obj.href;
    else if (obj.onclick)
      obj.onclick();
  }
}

function findIfExists(start)
{
  var objFound = null;
  for (var i = 0, n = start.childNodes.length; i < n; i ++)
  {
    var curr = start.childNodes[i];
    objFound = findIfExists(curr);
    if (objFound != null)
      break;
    var currX = getX(curr);
    var currY = getY(curr);
    if (curr.offsetWidth && curr.offsetHeight &&
        currX < x && x < (currX + curr.offsetWidth) &&
        currY < y && y < (currY + curr.offsetHeight))
    {
      objFound = curr;
      break;
    }
  }
  return objFound;
}
</script>
</head>

<body>
<div id="outer" onclick="alert('you clicked on the outer div');">
  startX: 19, endX: 219<br />
  startY: 19, endY: 219
  <div id="inner" onclick="alert('you clicked on the inner div');">
    startX: 49, endX: 174<br />
    startY: 79, endY: 204
  </div>
</div>

<div id="separate" onclick="alert('you clicked on the div off by itself');">
  startX: 401, endX: 501<br />
  startY: 51, endY: 151
</div>

<div id="theRest">
<a href="http://www.google.com">Go To Google</a>
<p>The link above starts at (8, 230) in Moz, but (10, 459) in IE</p>


<fieldset>
  <label for="theX">X coordinate:</label>
  <input type="text" id="theX" />

  <label for="theY">Y coordinate:</label>
  <input type="text" id="theY" />

  <input type="button" value="Simulate Click" onclick="doTheClick('theX', 'theY')" />
</fieldset>
</div>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ChrisDrakeAuthor Commented:
Wow - complicated but this has extreme potential to solve my problem!!!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.