This bookmarklet will map specific <meta> tags embedded in a document's header with corresponding flickr.com photographs and update the page's DOM on the fly to display them. For example, this page contains meta-data copied from a New York Times article about the protests following the 2004 elections in the Ukraine:

<meta  name="des" content="Elections;Demonstrations and Riots">
<meta  name="per" content="">
<meta  name="org" content="">
<meta  name="geo" content="Ukraine">
<meta  name="dat" content="November 23, 2004">

function draw () {
    
  netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');

  var flickr = new FlickrTags ();
  flickr.add_topic("geo");
  flickr.add_topic("des");
  flickr.add_topic("per");
  flickr.add_topic("org");
  flickr.draw();
}  
  

It works in Mozilla, does not work in Safari and is untested in IE and Opera. It may take a moment for the images to load.

This example will not work unless it loaded from jar:http://aaronland.info/javascript/flickr/flickr-tags/flickr-tags.jar!/example.html


draw

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis arcu vel sem. Aenean lobortis dapibus tortor. Proin dignissim felis non diam. Praesent diam arcu, adipiscing et, aliquet in, bibendum ac, elit. Aenean vulputate risus a purus. Nulla euismod, enim nec suscipit fringilla, lorem erat pharetra ante, ac ullamcorper turpis ante in metus. Nam pharetra turpis in nibh. Maecenas neque dui, ultrices eget, blandit non, pretium condimentum, elit. Donec pretium suscipit felis. Duis wisi urna, consequat quis, vulputate ac, rutrum lobortis, sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque et leo. Curabitur fermentum ornare tortor. Quisque adipiscing molestie magna. Vestibulum porttitor tempor magna. Proin non pede in enim commodo iaculis. Sed dictum rhoncus orci.

Quisque aliquam sem quis diam. Quisque augue. Curabitur risus. Nullam congue, nunc vitae imperdiet accumsan, metus dui interdum nulla, nec luctus eros massa sit amet wisi. Ut consequat accumsan nunc. Nullam sollicitudin felis ac tortor. Sed mattis vehicula nisl. Vivamus ac ligula sed mauris gravida sodales. Quisque et quam sit amet purus ornare gravida. Donec ultricies, libero et blandit tincidunt, nunc justo gravida pede, varius convallis lorem pede aliquet dui. Mauris scelerisque sollicitudin ipsum. Sed tempor, elit ac rutrum venenatis, metus felis consectetuer massa, ut tincidunt ante diam quis lorem. Donec scelerisque sodales nibh. Integer blandit risus in tortor.

Praesent mollis, tortor nec facilisis fringilla, wisi tellus rhoncus nulla, non dictum turpis lectus quis lacus. Nunc sodales pretium lectus. Vestibulum suscipit leo a sapien. Suspendisse potenti. Fusce a tortor ac pede sagittis euismod. Nam dignissim, pede a nonummy varius, risus massa euismod libero, vitae facilisis nunc justo non wisi. Fusce fermentum rhoncus eros. Phasellus convallis condimentum lectus. Nunc bibendum, ipsum quis mattis cursus, turpis elit dictum est, a aliquet quam erat et massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi suscipit. Suspendisse potenti. Nullam congue dui varius orci. Nunc pede. Proin sem elit, porttitor ac, laoreet ac, porta vel, nibh.

Quisque fermentum ullamcorper turpis. Maecenas sodales dictum dolor. Vestibulum lectus velit, gravida quis, gravida vestibulum, facilisis id, massa. Phasellus euismod, erat non tristique tempus, massa erat sodales augue, in tincidunt enim tellus sit amet quam. Curabitur vel justo. Aliquam consectetuer enim et wisi. Morbi iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pharetra lectus. Donec risus nulla, porta id, mattis in, vulputate ac, nulla. Suspendisse metus. Proin lobortis pretium quam. Proin id metus at mauris ultricies vestibulum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas pharetra semper nunc. Donec rhoncus. Sed sed erat. Aliquam erat volutpat. Nulla luctus facilisis arcu. Suspendisse vestibulum gravida eros. Integer sollicitudin varius tellus. Nam sit amet felis. Curabitur ullamcorper. Donec rhoncus. Nunc tempor accumsan arcu. Fusce arcu nibh, ultricies eget, interdum sed, convallis at, quam. In eget risus. Nulla cursus lacus quis nisl. Nullam eleifend purus ac nunc.

aaron straup cope