[Javascript] Mapping Image
Paul Novitski
paul at juniperwebcraft.com
Mon Sep 11 13:42:12 CDT 2006
At 9/11/2006 10:56 AM, Henrique Rennó wrote:
>I'd like to know if it's possible to map points
>in an image in order to show some information
>about them in an area of the page. The idea is
>to move the cursor over a point and make appear
>a menu on the left giving some options.
The easy way is to apply mouseover behavior to
the image that triggers the menu display automatically:
var oImage = document.getElementById("imageId");
if (oImage)
{
oImage.onmouseover = fnMenuShow;
oImage.onmouseout = fnMenuHide;
{
If you ever need to calculate whether a point on
the screen is over the image, you can do it this way:
1) Discover the image's exact X/Y position, for example:
http://www.quirksmode.org/js/findpos.html
2) You know or can discover its width and length, e.g. oImage.pixelWidth etc.
3) You're over the image if the mouse is:
to the right of its left edge
and to the left of its right edge
and below its top edge
and above its bottom edge
MouseX >= imageLeft
&& MouseX <= imageLeft + imageWidth
&& MouseY >= imageTop
&& MouseY <= imageTop + imageHeight
Regards,
Paul
More information about the Javascript
mailing list