image map coordinates with javascript?

Forum Moderators: open

Message Too Old, No Replies

image map coordinates with javascript?

How to get the coordinates of an user-click on an image without iFrame?

captainhannes

7:46 am on Jul 5, 2003 (gmt 0)

Hi everyone!

I have an image and I want to get the coordinates where the user clicked without reloading the page.

I already solved this with an iFrame, but I'm _not_ happy with the iFrame!

index-file:


<a href="xx.html" target="ifrm"><img src="world.gif" ismap></a>
<iframe name="ifrm" id="ifrm" width="0" height="0" src="xx.html" border=0 frameborder=0></iframe>

xx.html:
In this file which is the content of the iFrame I put back the coordinates into a form in the index-file via Javascript (location.search etc...).

Does anyone have another solution _without_ the iFrame?
(the page should not reload to get the coordinates)

Thank you very much in advance!

Best regards,
Hannes / Austria

tedster

10:40 pm on Jul 5, 2003 (gmt 0)

This is a tough one, I think. Explorer has a pair of proprietary objects, offsetX and offsetY which give the mouse coordinates for an event, relative to the srcElement. But unless you only care about Explorer, you'll need something cross-browser and this is an area where there has been a lot of inconsistency cross-browser.

jalarie

12:56 pm on Jul 9, 2003 (gmt 0)

This won't give the coordinates, but it will specify an area:

<html>
<head>
<title>Image Map</title>
<script type="text/javascript">

</script>
</head>
<body>
<img src="lion2.jpg" border=0 usemap="#mymap">
<map name=mymap>
<area shape="circle" coords="220,230,100" href="javascript:Get('head');">
<area shape="rect" coords="675,60,815,84" href="javascript:Get(1);">
<area shape="rect" coords="675,85,815,106" href="javascript:Get(2);">
<area shape="rect" coords="675,107,815,128" href="javascript:Get(3);">
<area shape="rect" coords="675,129,815,150" href="javascript:Get(4);">
<area shape="rect" coords="675,151,815,174" href="javascript:Get(5);">
<area shape="rect" coords="675,175,815,196" href="javascript:Get(6);">
<area shape="default" href="javascript:Get(0);">
</map>
</body>
</html>

captainhannes

5:40 am on Jul 10, 2003 (gmt 0)

Thank you all for your suggestions!

Tedster, I also thought of trying to use the coordinates of the image and the mouse, but soon realized that is causing more troubles ... what if the user scrolls - I read that the coordinates of the image 'move' aswell, so I additionally need to check the coordinates of the scrolling...

Jalarie, my image is 720x360, so I would end up 259200 'area shapes'. Even if I make small rect's with 3x3pixels, there are 28800 'area shapes'.

Well, I think I will leave the page with the iframe - I included a note for users with non-iframe capable browser, that they need to enter the coordinates of their geographical location manually.

Thanks again!

All the best,
Hannes.

tedster

7:06 am on Jul 10, 2003 (gmt 0)

what if the user scrolls

That is the beauty of offsetX reporting coordinates relative to the srcElement. You're right, getting screen coordinates is way too crazy.

jalarie

11:49 am on Jul 10, 2003 (gmt 0)

captainhannes, your math is good, but the logic escapes me. Why would you wish to define ALL possible pixels? Just define the large areas of interest.

captainhannes

4:42 am on Jul 12, 2003 (gmt 0)

Thank you very much again for your input, jalarie and tedster!

jalarie, actually the image is a map of the whole world, where the user can define his location, which is needed for the server-side calculation of Sun/Mars rise and set times :-)
But since the map only puts the value for longitude/latitude into a form and doesn't trigger the calculation, it is OK. The user can always enter longitude/latitude values manually into the form.

Thanks again,
Hannes.