?
Solved

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

Posted on 2004-11-05
6
Medium Priority
?
3,362 Views
Last Modified: 2012-08-14
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 :-)
0
Comment
Question by:ChrisDrake
  • 3
  • 2
6 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 12503698
<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
 
LVL 2

Author Comment

by:ChrisDrake
ID: 12503907
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 12505217
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
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!

 
LVL 2

Author Comment

by:ChrisDrake
ID: 12505517
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
 
LVL 19

Accepted Solution

by:
dakyd earned 200 total points
ID: 12510664
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
 
LVL 2

Author Comment

by:ChrisDrake
ID: 12511733
Wow - complicated but this has extreme potential to solve my problem!!!!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question