FotoNotes™ RolloverViewer

About:

FotoNotes™ RolloverViewer is an open-source PHP script which will read a FotoNote™-annotated image and create an imagemap with Javascript rollovers to display the image's notes. Use your mouse pointer to roll over the image on the right for an example.

FotoNotes™ is an exciting new specification to store information about regions of a photo inside a digital image. The Javascript rollover viewer was put together in the DHTML image annotation post at scribbling.net by Gina Trapani. FotoNotes™ RolloverViewer reads the FotoNotes™ format and renders the viewer.

The advantage of this viewer is that Flash is not required - just Javascript and CSS support. Additionally the <noscript> tag will allow non-Javascript-enabled clients to render the image without notes.

Requirements:

PHP with GD installed on your web server
overLIB Javascript library (© Erik Bosrup)
A FotoNote™-annotated image (see FotoNotes.net for more information)

Download:

fotonotesrolloverviewer.tar.gz

Installation:

Obtain overLIB. Extract to a directory on your web server.
Download fotonotesrolloverviewer.tar.gz. Extract to a directory on your web server.
Edit fotonotesrolloverviewer/config.inc.php. Set the appropriate values.
Go to http://yourserver/yourdirectory/fotonotesrolloverviewer/, at which point you should be looking at this page.
Test your FotoNotes™ RolloverViewer installation.
Use the FotoNotes™ RolloverViewer Javascript include to add an annotated image to any web page.

Questions:

Does this allow me to add notes to a photo?
No. FotoNotes™ RolloverViewer is a read-only viewer which just lets you see notes already added to a photo.
Then how do I add notes to a photo?

I've used the FotoNoterPlugin viewer, a Flash interface provided by the developers at FotoNotes. Use it to add and edit notes to the helicopter photo. Note that the helicopterovernyc.jpg image must be writable by PHP for notes to be added, and the latest version of Fotonoter should be obtained here.

Thanks:

The developers at FotoNotes for making this possible.
Anil Dash for making the suggestion.
Erik Bosrup for the ever-amazing overLIB.
Bruno Pedro for the primer on XML/PHP transformations.

Contact:

gina at scribbling dot net

Fine Print:

November 21, 2004

I put together this viewer in a few hours on a weekend. It hasn't been extensively tested, and the code could certainly be more performant. It's more proof of concept than anything else. Use at your own risk.