Mouse click position on the image

**mirzao** · 10-21-2005 02:37 AM

How can I capture mouse click position on the image, and draw a little arrow on the image?

**Kor** · 10-21-2005 02:52 AM

capture the mouse pos:

PHP Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Style-Type" content="text/css">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<script language="JavaScript" type="text/JavaScript">

var posx;var posy;

function capmouse(e){

// captures the mouse position

posx = 0; posy = 0;

if (!e){var e = window.event;}

if (e.pageX || e.pageY){

posx = e.pageX;

posy = e.pageY;

}

else if (e.clientX || e.clientY){

posx = e.clientX;

posy = e.clientY;

}

}

function showP(){

alert('X mouse is: '+posx+' Y mouse is: '+posy)

}

</script>

</head>



<body onmousemove="capmouse(event)">

<img src="00.jpg" onclick="showP()">

</body>

</html>

**mirzao** · 10-21-2005 08:18 AM

Kor, this is OK. But I don't need messagebox with x y position. As you can see from my question I want to mark (by some another image,maybe arrow) the place where you click on first image. I know that I must use layers for this, but I'm not so good with javascript

**Lerura** · 10-21-2005 02:50 PM

i think you need to map (ismap/usemap commands) you image.
i'm not much into mapping. but using this the click will "execute" the coordinates of the click according to the image. and when e.g you click at the image-coordinates "300,200" then u can center the little image at this point using some styling through javascript.

**herodote92** · 10-21-2005 03:36 PM

I adapted a little Kor's script, this works (it positions a X on the image, where the user clicked). You could easily improve it (positioning an arrow image, for ex.):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Mouse position</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
<script language="JavaScript" type="text/JavaScript"> 
var posx;var posy; 

function capmouse(e){ 
// captures the mouse position 
  posx = 0; posy = 0; 
  if (!e){var e = window.event;} 
  if (e.pageX || e.pageY){ 
    posx = e.pageX; 
    posy = e.pageY; 
  } 
  else {
    if (e.clientX || e.clientY){ 
      posx = e.clientX; 
      posy = e.clientY; 
    } 
  }
} 
function showP(){
  document.getElementById("div2").className="div3"; 
  document.getElementById("div2").style.top =(posy-10)+'px';
  document.getElementById("div2").style.left=(posx-6)+'px';
} 
</script> 
<style type="text/css">
.div1 {position:absolute;top:100px;left:100px;visibility:visible;z-index:5}
.div2 {position:absolute;top:0px;left:0px;visibility:hidden;z-index:1;color:black;}
.div3 {position:absolute;visibility:visible;z-index:10;font-family:monospace;font-size:20px;font-weight:900;color:black;}
</style>

</head> 

<body onmousemove="capmouse(event)"> 
  <div id="div1" class="div1">
    <img src="./my_image.gif" onclick="showP()"> 
  </div>
  <div id="div2" class="div2">
  X
  </div>
</body> 
</html>

**mirzao** · 10-21-2005 04:22 PM

Thank you Herodote92 very much, I have tested your script, and it is exactly what i'm looking for.

**mf22cs** · 09-16-2006 03:26 AM

One issue.

If the image used is to big for the browser and you have to scroll the X is not placed at the same point as you are clicking on. Solution?

/marcus

**Kor** · 09-18-2006 01:47 AM

Yes, you may compensate the scroll position:

Code:

<script type="text/JavaScript">
var posx;var posy;
function getMouse(e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//IE:Moz
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
posx=ev.clientX+document.body.scrollLeft;
posy=ev.clientY+document.body.scrollTop;
}
else{return false}//old browsers
}
</script>

**mf22cs** · 09-18-2006 10:11 AM

Thanks a lot... :-)

/marcus

**wter** · 02-21-2009 11:57 AM

how to control the click on the so that we can only click on the image not more 5 times click?

**PowerCheez** · 02-18-2013 01:36 AM

I am also interested in the script here but when I inserted it into my page two issues arised.
1) The picture that is supposed to be clicked ended up on the top of the page overlaying the form underneath. I need it to be positioned in a certain place.

2) I need to be able to position several marks on the same image. How do I do that?

And as a bonus, I need these marks to be able to be transferred to a pdf along with everyting else in the form at the end of completing the form.

**zeeshanaayan07** · 02-18-2013 04:54 AM

Thanks Bro for sharing us

Thread: Mouse click position on the image

Thread Tools

Display

Mouse click position on the image

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions