473,442 Members | 4,386 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

get XY coords of click on image

I remember doing something like this before, but it's been a while since
I've touched javascript...

I have a standard <img> and when a user clicks the image I want
to output the IMAGE x y coordinates of the mouse click (i.e. not
the page x y coords).

I know that appending 'ismap' to the image tag will give me the image
coordinates, but I can't use that since the img already has a
'usemap' attribute.

I did some searching on google and came up with the following code
which only seems to return the page XY coordinates:

<script type="text/javascript">
<!--
var getX = function(evt){
if(evt.x){ return evt.x; }
if(evt.pageX){ return evt.pageX; }
}
var getY = function(evt){
if(evt.y){ return evt.y; }
if(evt.pageY){ return evt.pageY; }
}
var alertCoords = function(evt){
alert("X = "+ getX(evt) +"\nY = "+ getY(evt));
}
// -->
</script>
</head>
<body>
<div onclick="alertCoords(event);">Click ME</div>
</body>
</html>

The code I'm looking for should be something similar!
Thanks :)
--

"I hear ma train a comin'
.... hear freedom comin"
Jul 23 '05 #1
2 10966
Some code from my libraries:

// Your client sniffer
is=new ClientSniffer()// Should set is.ie=true if IE & is.moz=true if
Mozilla...
// Abbrev Vars
_w=window
_d=document
// X & Y Code
function getEventX(e){
return is.ie?e.clientX+_d.body.scrollLeft:e.clientX+_w.pa geXOffset
}
function getEventY(e){
return is.ie?e.clientY+_d.body.scrollTop:e.clientY+_w.pag eYOffset
}

This code will work with both Mozilla and IE. It's not tested with any
other browsers.

JsD
Jul 23 '05 #2
Java script Dude wrote:
Some code from my libraries:
If its indicative of all your libraries, users should beware of it.
// Your client sniffer
is=new ClientSniffer()// Should set is.ie=true if IE & is.moz=true if
Mozilla...
Truely cross-browser scripts dont care what browser. It tests for
supported features, not browser names.
// Abbrev Vars
_w=window
_d=document
// X & Y Code
function getEventX(e){
return is.ie?e.clientX+_d.body.scrollLeft:e.clientX+_w.pa geXOffset
}
function getEventY(e){
return is.ie?e.clientY+_d.body.scrollTop:e.clientY+_w.pag eYOffset
}

This code will work with both Mozilla and IE. It's not tested with any
other browsers.


But you did not include the ClientSniffer() function, so it doesn't work.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Dave Harris | last post by:
I have written a reasonably clean way to perform coordinate transformations on a polygon, but Tkinter Canvas is not being particularly cooperative. The following program has been distilled down to...
1
by: Vangelis Natsios | last post by:
I want to create a page with a scrolling image that will cause different messages to appear on another part of the page (say, another <div>) as the image will scroll. Imagine something like this: ...
4
by: Csaba2000 | last post by:
I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE 5.5+). This should work regardless of whether IE has focus. Normally you would...
3
by: tommydog | last post by:
i am trying to generate an image map from the mouse coords of a click. i can pass the X Y through ok as $_POST $_POST how should the string be put into the AREA tag ? i am keeping the diameter...
3
by: Matthias Vodel | last post by:
Hi all, I want to change the beginning/end-coordinates of a canvas.line item. Something like: self.myCanvas.itemconfigure(item_id, coords=(x1_new, y1_new, x2_new, y2_new)) I don't want...
3
by: Rhishabh07 | last post by:
how to define coords in an image for an area shape i m using <img src="left.jpg" width="350" height="29" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap" name="planetmap">...
13
by: sevenz24 | last post by:
So i have my images set up like this : http://cgi.ebay.com/Tippmann-98-paintBall-Marker-Gun-Paint-Ball_W0QQitemZ250274334261QQihZ015QQcategoryZ47248QQssPageNameZWDVWQQrdZ1QQcmdZViewItem Scroll...
1
by: Andrew Poulos | last post by:
I have a image in a scrollable DIV. The image is bigger than the display size of the DIV. How do I get the coordinates of a mouse click on the image relative to the top left corner of the image...
2
by: erbear | last post by:
Hi all, I am new to VB, and I am having some troubles. I have a listbox that when you click on the item it displays a picture in a picture box and a message in a label. It works fine when an item...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.