I've finished the version of Fotonotes for MediaWiki.
This page describes how to install it:
http://meta.wikimedia.org/wiki/Fotonotes.
This page shows an example (of a slightly modified version) of it in
use: http://www.werelate.org/wiki/Image:Test_image.jpg. The
modifications are minor: I changed the fnInputFieldID and fnOuterTag
variables in the fnclientwiki.js script so that the script stores the
notes in a hidden input field.
I found a couple of additional bugs that you might want to fix:
In fnAddNote: add Math.round calls to
newArea.style.left = (Math.round(container.offsetWidth/2) - 25) + 'px';
newArea.style.top = (Math.round(container.offsetHeight/2) - 25) + 'px';
In fnEditButtonHandler: use style width and height instead of
offsetWidth and height, because offsetWidth and Height are +2 pixels
greater than the actual width and height:
newWidth = parseInt(area.style.width);
newHeight = parseInt(area.style.height);
Everything is working great!
Now for a question: For the website I'm using this on, I would like to
replace the fotonotes link at the top of the image with a button
linking to the fotonotes website at the bottom right-hand corner of
the page, next to the "powered by MediaWiki" button. Do you have an
image that I could use for this button?