I am doing this as a first part of my series on how to make a Fotonotes system like Flickr uses but from scratch. Ok well almost from scratch.
The reason I want to redo this is mainly because Fotonotes imports the note data in an XML form inside the jpeg image. Now this is good for a site like Flickr that only shows one image but I want it to be able to handle 20 images on a page. So my idea was to put everything into a database and then just have the notes be hidden until a user hovers over a image. Then just use javascript to show those images. I am thinking this would be easier on the server since it doesn't have to reload the image each time to show the data. I could be wrong though :)
The first thing you want to do is is download dragresize. This pretty much creates the re-sizable boxes so you can select an area you want to add a note to.
I pretty much took the example that comes with it and I found this thread that had the perfect solution to find a x/y coordinate of a element on a page in javascript. Check out the second post for the function I am using. Right now it does just what I want.
The issue I am running into with this test is that firefox does not move the div to the upper left corner until you actually click on it. IE6 and opera seem to behave how I want. I will have to look into this issue and update.
The example has some bounding issues, but I just think that it is due to it being right at the top.
Also its a layout ripped from Photoblog since I need for this to work on that site :)