473,785 Members | 2,801 Online
Bytes | Software Development & Data Engineering Community
+ 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="alertC oords(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 10982
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.scroll Left:e.clientX+ _w.pageXOffset
}
function getEventY(e){
return is.ie?e.clientY +_d.body.scroll Top:e.clientY+_ w.pageYOffset
}

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.scroll Left:e.clientX+ _w.pageXOffset
}
function getEventY(e){
return is.ie?e.clientY +_d.body.scroll Top:e.clientY+_ w.pageYOffset
}

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.javas cript 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
5362
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 a minimum and generates a traceback (see below) when it runs. It appears that the create_polygon() method is more versatile than the coords() method. Could someone can suggest a way to have the list comprehension not generate tuples, that...
1
2925
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: Image DIV Text DIV (Visible Area) +-----------+ Image +---------+ +-----------|------------------------+ | | | o | ...
4
17257
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 do myDomElement.click and the mouse doesn't matter, but in the case of an input image element, what happens is the submitted url has something like "?x=12&y=7" appended to it (the numbers vary per mouse position on the clicked element). If you hit...
3
2093
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 as 10 this is what i am trying: echo "SHAPE=CIRCLE COORDS="'.$_POST.',143,10">";
3
12569
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 to delete and repaint a new line item. Is this possible?
3
2823
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"> <area shape ="rect" coords ="0,0,199,29" href ="sun.htm" alt="Sun"> <area shape ="circle" coords ="200,0,350,29" href ="mercur.htm" alt="Mercury">
13
29768
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 down to the bottom and you see several images, One large one and then several smaller ones, when you click on the smaller ones it places a larger version of that picture in place of where the other larger picture was, well i use this method on my...
1
1264
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 itself? Andrew Poulos
2
4416
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 is manually selected, but I want forward and back buttons that will do this. It works once but it doesn't highlight the new item in the listbox, so it gets stuck. I can't use a loop either. Any help is greatly appreciated. See code below: ...
0
9645
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10336
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8978
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7502
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6741
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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5513
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4054
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3655
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2881
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.