I just finished making a little Flickr toy: flickReplacr. It's a bookmarklet that seems to work fairly well in IE and Firefox/Mozilla (Safari - not so much). What does it do? You can highlight any word on any web page, click the flickReplacr bookmarklet, and the word gets swapped out with a random image from flickr that was tagged with that word. So "apple" becomes a 75x75 image of an apple.

It's a little unpredictable with tiny words, and only seems to work well with 3 or fewer words, but can be kinda fun to play with.

(Read on only if you're interested in the geekery of it) - I first tried to do this all inline with javascript swapping out the contents of the page, got it all working, packed a full xmlhttprequest and swap into the 488-character limit for bookmarklets in IE6, only to smack my forehead later because of 'permission denied' issues. I'd forgot that xmlhttprequest only works happily in the same domain as the parent page (except when the page is local, using the "file://" protocol).

So I tried to think of a way around that and realized I could just swap out the highlighted text with a little tunnel (an iframe) and bypass the cross-domain issues. Unfortunately, it then became a two-part piece (bookmarklet calls my server, image returned to newly created iframe), not as elegant as an all-in-one bookmarklet, but it works.

Also, it stinks (as per usual) to have to branch code so much to accomplish the same thing in IE and Firefox. Document.selection vs. window.selection, pasteHTML vs. deleteContents and insertNode, blah blah blah. It's fun to have so much control over the DOM, not so fun to still be playing the same damn ugly cross-compatibility games I've been playing since... God, since image rollovers were introduced - so that's approaching ten years of cross-platform headaches as a part of my daily job.

2 Comments +