/    Sign up×
Community /Pin to ProfileBookmark

Mouse click position on the image

Copy linkTweet thisAlerts:
Oct 21.2005

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

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorOct 21.2005 — capture the mouse pos:
[code=php]
<!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>
[/code]
Copy linkTweet thisAlerts:
@mirzaoauthorOct 21.2005 — 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
Copy linkTweet thisAlerts:
@LeruraOct 21.2005 — 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.
Copy linkTweet thisAlerts:
@herodote92Oct 21.2005 — 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.):

<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Mouse position&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script language="JavaScript" type="text/JavaScript"&gt;
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';
}
&lt;/script&gt;
&lt;style type="text/css"&gt;
.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;}
&lt;/style&gt;

&lt;/head&gt;

&lt;body onmousemove="capmouse(event)"&gt;
&lt;div id="div1" class="div1"&gt;
&lt;img src="./my_image.gif" onclick="showP()"&gt;
&lt;/div&gt;
&lt;div id="div2" class="div2"&gt;
X
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@mirzaoauthorOct 21.2005 — Thank you Herodote92 very much, I have tested your script, and it is exactly what i'm looking for.
Copy linkTweet thisAlerts:
@mf22csSep 16.2006 — 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
Copy linkTweet thisAlerts:
@KorSep 18.2006 — Yes, you may compensate the scroll position:
<i>
</i>&lt;script type="text/JavaScript"&gt;
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
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@mf22csSep 18.2006 — Thanks a lot... :-)

/marcus
Copy linkTweet thisAlerts:
@wterFeb 21.2009 — how to control the click on the so that we can only click on the image not more 5 times click?
Copy linkTweet thisAlerts:
@PowerCheezFeb 18.2013 — 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.
Copy linkTweet thisAlerts:
@zeeshanaayan07Feb 18.2013 — Thanks Bro for sharing us
×

Success!

Help @mirzao spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...