app - defining clickable areas of photo by your mouse

This site is best viewed in a modern browser with JavaScript enabled.

app - defining clickable areas of photo by your mouse

dedtadeas

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

Sup3rkirby

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 [FONT=Courier New]onclick[/FONT] 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));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }

  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.