2011/1/3 keepsimple <[email protected]>: > [...] But I was not able to figure out: > > how to display an (apparent) overlay rectangle on a area of a web > page? This rectangle is meant to be the area for the web clip so the > user can adjust its size by dragging the corners.
The way I would solve it is to create a donut [1], an overlay of four boxes. These semi-transparent dark boxes should be around the highlighted area. To abstract the computations you may create a constructor function, or a singleton with the appropriate interface to easily manage resizing and replacing the highlighted area (which is essentially equivalent to resizing and replacing the dark overlay boxes). After the bla, bla, here is a demo of what I'm talking about :) -> http://jsbin.com/exuwu3/30/edit (preview) Also, I've made a fork which shows how the four boxes surround the highlighted area (which is empty). http://jsbin.com/azuni5/ I hope this helps you to start. What you need is to handle mouse events on the markers and resize the overlay accordingly. Another marker can be added to the center which moves the box. > I have search a couple of Javascript books but did not find what I > needed yet. I guess there is one part of Javascript i might not be > aware to support such functions. [...] There is no such book as "Create an overlay for webslice", as far as I know. Also there is no hidden part of Javascript. What you needed is more to be done with the DOM and CSS. Of course this may be a bit tough for a beginner. I hope you can improve it. Let me know if you finish the extension. I'm interested in your work. Best, - Balázs [1] I've coined the term from Peter Michaux's dragdrop article: http://peter.michaux.ca/articles/new-dragdrop-recipe-donut-dragdrop -- To view archived discussions from the original JSMentors Mailman list: http://www.mail-archive.com/[email protected]/ To search via a non-Google archive, visit here: http://www.mail-archive.com/[email protected]/ To unsubscribe from this group, send email to [email protected]
