[Javascript] Mapping Image

[Paul Novitski]

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