Results 1 to 2 of 2

Thread: app - defining clickable areas of photo by your mouse

Hybrid View

  1. #1
    Join Date
    Nov 2012

    app - defining clickable areas of photo by your mouse

    Hello everybody,
    I am to create web application where you define clickable parts of image (for the beginning lets talk just about rectangular - first click = left upper corner, second click = right down corner - after i am supposed to make circle or just a small point).
    My question is how to get relative (to an image) coordinates of clicked points into variables x and y ?

    BTW - my tool should be able to upload picture and define clickable areas of optional shape (rectangular, circle, point). I am not quite sure if javascript is for that purpose the best one (PHP or Java is mabey better?), but I would like to use Javascript the most i can.
    thanks in advance Tad

  2. #2
    Join Date
    Mar 2005
    Behind you...
    This is certainly possible in JavaScript. PHP is a server-side language so it wouldn't give you any active functionality on a page and Java, while typically is installed does of course require it to be present and enabled for that browser.

    If you have the image displayed on the page as an element you will simply want to have an onclick event fire for that element with something similar to what I have below:
    <img id="sampleImg" src="foo.jpg" alt="" onclick="imgClickLoc(event, this.id)" />
    From there you can use a little JavaScript to return the x and y values for where on the image the user has clicked:
    function Browser() {
      var ua, s, i;
      this.isIE = false;
      this.isNS = false;
      this.version = null;
      ua = navigator.userAgent;
      s = "MSIE";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isIE = true;
        this.version = parseFloat(ua.substr(i + s.length));
      s = "Netscape6/";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = parseFloat(ua.substr(i + s.length));
      s = "Gecko";
      if ((i = ua.indexOf(s)) >= 0) {
        this.isNS = true;
        this.version = 6.1;
      this.isIE = true;
    var browser = new Browser();
    function imgClickLoc(event, id) {
      var cursorLoc = new Array();
      imgObj = document.getElementById(id);
      if (browser.isIE) {
        StartX = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        StartY = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
      if (browser.isNS) {
        StartX = event.clientX + window.scrollX;
        StartY = event.clientY + window.scrollY;
      StartLeft = parseInt(imgObj.offsetLeft, 10);
      StartTop = parseInt(imgObj.offsetTop, 10);
      if (isNaN(StartLeft)) imgObj.StartLeft = 0;
      if (isNaN(StartTop)) imgObj.StartTop  = 0;
      cursorLoc = [(StartX - StartLeft), (StartY - StartTop)];
      return cursorLoc;

    I haven't tested this yet though so it may not be perfect. It's basically just a rough draft though. It will return an array containing the x and y values for where the cursor is located relative to the image itself. Obviously with this setup you wouldn't see anything. I don't know what part of your code needs those values so you would want to adjust it so those returned values get sent there instead.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center