Scribbling.net

• # jim:

  you. are. fuckin. amazingf. no, that's not a misspelling.
• # Eric Costello:

  V. nice!
• # giovanni:

  yaba yaba yabbbbaaaa! cool! for me solution in photo2 is _just_ fine. le t the user do some work. the producer can add a note that "photos may be annotated... please explore"
• # Jay Fienberg:

  Oh, awesome!
• # Su:

  Sexy.
  Overlib is really nice, but I think I've already explained that I'll go out of my way not to use Javascript if at all possible. Javascript is icky.
  
  This recent find might be more appropriate for cases where you need to specify *points* of interest/ or just rectangular areas, or maybe for quickie purposes, anyway:
  http://www.moryson.net/eintrag.cfm?eid=8
  
  I particularly like the fact that it's totally tweakable in-browser. I don't want to think about trying to define map areas manually without a visual editor.
  
  The page is in German, but the code is pretty self-explanatory if you give it a minute. Bonus: it's (sorta[?]) semantic! *rolls eyes*
• # Gina:

  Su, how did I know you'd have something else good up your sleeve? I knew about overLIB because of you, after all. It must be that bookmarks file of yours...
  
  I agree with you about Javascript. I kinda feel the same way, except worse, about Flash. Which was why I was taking the Flickr UI and making it Javascript. But I very much like this technique... though I must admit the German is making it a little tough to get my brain around what's happening... ohh, I *think* I get it....
• # Small Paul:

  JavaScript ain't icky! If you use it right, it can add really neat UI features to your site and degrade nicely.
• # Su:

  Paul: I know, and the same can be said about Flash, for that matter. But how many sites have you seen that actually embed a fallback OBJECT for people who don't have Flash running? I know I'm a bit of a freak for it, but my interest in Flash content is almost nil.
  
  I'm a big fan of the unobtrusive DHTML movement, and admit my distrust of JS stems from the past necessities of huge browser detection scripts, but if I can get acceptable resuls with a little extra stylesheet/markup twiddling, I'd as soon not bother with the scripting at all. Also, users are much less likely to have styles turned off/overriden than Javascript.
• # neil21:

  I wonder if you couldn't do something like this with A List Apart's image slicing technique?
  
  http://www.alistapart.com/articles/sprites/
  
  The irregular shapes here remind me of your photograph:
  http://www.alistapart.com/d/sprites/ala-blobs2.html
  
• # Anil:

  Are you using the Fotonotes format? (fotonotes.net) Greg's made the format pretty open, and that's what Flickr is using to implement the notes. I'd love to see those all combined together.
• # Gina:

  I'm not using fotonotes, but I'll look into doing so. It looks very intriguing, but the site is throwing some errors when I try to upload a photo to try it out, so once that gets worked out...
  
  Great suggestion, though, Anil. I'd love to create an open web interface to embedding the metadata, then have a script generate the image map above based on the fotonotes data.
• # Ryan:

  Thanks for the idea! I am finally able to add dynamic links to a map for Bay Area FreeFi!
  
  Check out the one I made for San Francisco!
  
  I elected not to include the hover (despite being a key component to your story), because it didn't look very nice. And apart from having the flickr look-and-feel, i'd rather have it just be simple.
  
  Thanks again!
  
  I look forward to adding maps to the other members of the freefi family.
• # Ryan:

  (and if you can find me a nice NYC map image, i'd love to add it to the NYFreeFi.com wi-fi hotspot listing!)
• # Stuart Langridge:

  Just in case I'm a bit dim here, this image annotation is orthogonal to Fotonotes, isn't it? Fotonotes describes a format for storing photo annotation data in an image file; this script, and mine as well, describe how to actually display said notes in an HTML document. The server might well read out Fotonotes from an image and then render the HTML document to display those notes using Gina's method or my method or some other method, but they're not the same thing? Unless I'm missing something here...?
• # Gina:

  Stuart - you're right, they're not the same thing. But it would be nice to see them coupled up.
  
  I think a web interface to achieving the client-side display is in order first, *then* the interface to save the metadata to the file ala fotonotes, then a class to read the metadata and render the front end.
• # Gina:

  Ryan, that's awesome! Looks so good!!!
• # Derek Featherstone:

  Gina -- great stuff... Can I make a suggestion/request though? Can you add redundant onfocus="" and onblur="" to your image map code so that it works for keyboard users as well? That would make this waaay cooler (ok, only marginally cooler...)
• # Greg Elin:

  Gina, Stuart - This stuff looks great! And yes, the display of annotations is orthogonal to the Fotonotes, which is a proposal for a standarized schema to storing the data in the jpeg files plus a few UI interface conventions. Fotonotes also proposal a manner to reference the annotations by URL links.
  
  Having different tools and approaches to rendering the annotations is *great* to see!
  
  I've been converting Fotonotes.net to a wiki to discuss and evolve the standard. Hopefully, enough pages will be complete the site can go live this weekend!
  
  
• # E-paranoids:

  Very Nice Technique
  
  Height oF DHTML Achieved, Keep Experimenting
• # Evan:

  Very nice. This and su's link inspired me to do a little experimentation with strictly css.
• # Jan Moryson:

  Hi,
  I found your side while checking my referers. Nice, that you like my Code on moryson.net.
  
  If someone has problems with the German language, do not hesitate to post a question. Germans don´t bite ;-)
• # Mathew:

  So, you edit these in an HTML editor? Has anyone come up with a way to edit this on this page?

This discussion has been closed. Thanks to everyone who participated. See Scribbling.net's comment policy for more information.