How can I capture mouse click position on the image, and draw a little arrow on the image?
Printable View
How can I capture mouse click position on the image, and draw a little arrow on the image?
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>
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
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.
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>
Thank you Herodote92 very much, I have tested your script, and it is exactly what i'm looking for.
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
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>
Thanks a lot... :-)
/marcus
how to control the click on the so that we can only click on the image not more 5 times click?
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.
Thanks Bro for sharing us
