Highlighting the X Coordinate on an ImageButton

rito1
rito1 used Ask the Experts™
on
Hi All,

I have created a measuring ruler image and applied it to an ImageButton so that I can obtain a user's response by measuring their click coordinates.

This is great that I can obtain the X and Y coordinates via the ImageButton Click event. But now I have been asked to show the users click by highlighting their click position on the actual imageButton.

Does anyone have any ideas on how best to implement this?

Many thanks,

Rit
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
CvD

Commented:
I'm not a C programmer, but I would suggest you modify the ruler image to highlight the coordinates selected. I found a website that might be helpfull to you: http://www.dreamincode.net/forums/topic/76816-image-processing-tutorial/

Good luck.
Top Expert 2015
Commented:
You can do it client side.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.CLICK);
document.onclick = getMousePosition;
function getMousePosition(e) {
  var _x;
  var _y;
  if (!isIE) {
    _x = e.pageX;
    _y = e.pageY;
  }
  if (isIE) {
    _x = event.clientX + document.body.scrollLeft;
    _y = event.clientY + document.body.scrollTop;
  }

document.getElementById('dot').style.left = (_x - 8) + 'px';
document.getElementById('dot').style.top= (_y - 8) + 'px';
document.getElementById('dot').style.visibility = 'visible';
document.getElementById('dotLabel').innerHTML = '<span>x = ' + _x + ', y = ' + _y + '</span>';
document.getElementById('dotLabel').style.visibility = 'visible';
document.getElementById('dotLabel').style.left = (_x - 8) + 'px';
document.getElementById('dotLabel').style.top = (_y + 5) + 'px';

  return true;
}
</script>
</head>
<body>
<div style="position:relative;margin:0 auto;padding:0">

<img src="http://www.myspacedaddy.com/Myspace-Codes-Backgrounds/myspace-codes-backgrounds-2.gif" alt="Click to get mouse position" />

    <div id="dot" style="position:absolute;background-color:#f00;width:6px;height:6px;visibility:hidden;z-index:100">
    </div>
    <div id="dotLabel" style="position:absolute;color:#fff;background-color:#000;height:20px;width:auto;padding:3px;visibility:hidden;z-index:100"></div>
</div>
</body>

</html>

Open in new window

Author

Commented:
Excellent thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial