Hi! Posted the question to prototype.js group, but it seems there is nearly zero actitivy. I though, maybe you could help. It is probably a silly thing to ask since it was probably asked hundred of times before, nonetheless I wasn''t able to find anything on Internet. How does one find an element''s position (X and Y) using prototype.js? What I need to do is to show image map hot spots when a user rolles his mouse over. To do that I need an image position so I could draw a div or something over it to show the spot. Could anyone point me into right direction, please? --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve
2007-Jul-06 11:26 UTC
Re: figuring out an image position using prototype library
Hey Vlad! Vlad a écrit :> Posted the question to prototype.js group, but it seems there is > nearly zero actitivy. I though, maybe you could help.The other group is stillborn. This is the official GGroup for Prototype and script.aculo.us.> How does one find an element''s position (X and Y) using prototype.js?Well an *element''s* position can be found through the methods currently in the Position namespace (which were migrated to Element in the upcoming 1.6), such as positionedOffset, for instance. But that doesn''t appear to be what you need...> What I need to do is to show image map hot spots when a user rolles > his mouse over. To do that I need an image position so I could draw a > div or something over it to show the spot.So you''re interested in the mouse cursor''s position over an element, not the element''s position, right? You''d get that with the clientX and clientY properties of the event object in a mouse event listener. But easier still: why don''t you just put, say, <span> elements on the right places and either use CSS :hover (if you can afford to skip IE6-) or react to their mouseover/mouseout events? -- Christophe Porteneuve a.k.a. TDD "[They] did not know it was impossible, so they did it." --Mark Twain Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Christophe, cheers. I''ve got a third party server side component that generates graphs. They are output as images + image map that represents graph columns/ bars, making them hot spots. I want a user to be able to point a mouse over the picture and see all hot spots (like on Flickr). Nonetheless, since I have no idea there on page the image will appear and hotspots are relative to the image, I need to use JS extensively to calculate image position and then draw divs to indicate hot spots over it. Hence the question. I know there are plenty scripts on Internet to find element''s position. I wonder if I could use prototype for that, however. Vlad --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Hmmm, so how many images are output. I have a feeling if it is one image with a lot of mapping that you''re troubles don''t begin or end with element positions. Granted, if you had a lot of images in a document that you need to graphically enhance in this manner, I''d use $$ to collect all necessary images, send them to a function to attach mouseover/out events, and build its absolutely positioned overlay, you''ll need its cumulativeOffset and its dimensions, position the overlay div at those coordinates with those dimensions and make sure its z-index is higher than the image, don''t forget to lower opacity. Once its built, you can attach it to the document but just make sure its hidden, then on the img''s mouseover effect just show the overlay, you can even extend the image object to contain an extra reference, like img.overlay.show(); On Jul 6, 7:42 am, Vlad <vgu...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Christophe, cheers. > > I''ve got a third party server side component that generates graphs. > They are output as images + image map that represents graph columns/ > bars, making them hot spots. > > I want a user to be able to point a mouse over the picture and see all > hot spots (like on Flickr). Nonetheless, since I have no idea there on > page the image will appear and hotspots are relative to the image, I > need to use JS extensively to calculate image position and then draw > divs to indicate hot spots over it. > > Hence the question. I know there are plenty scripts on Internet to > find element''s position. I wonder if I could use prototype for that, > however. > > Vlad--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---