Hack 49. Find Similar Images

Explore the Web in a new way by finding other images of the same name.

I will be the first to admit that this hack has no practical purpose. I originally conceived it in an IRC channel, when someone posted a link to http://images.google.com/images?q=P5170003. That particular keyword is a filename used by a particular brand of digital camera. Some cameras generate filenames based on the date the photo was taken and a unique identifier within the camera; others simply use an incrementing identifier starting with 1. Many people take digital images and then simply publish them online, without giving the photo a more meaningful filename. The end result is that you can use Google Images to find a random selection of images published by different people. (This particular query finds photos taken on May 17, my wedding anniversary.)

Anyway, this hack converts all unlinked images into links to Google Images to find other random images with the same filename. If that sounds silly, that's because it is. It's also surprisingly fun, if you like that sort of thing.

6.4.1. The Code

This user script runs on all pages. It uses the document.images collection to find all the images on the page and wraps each of them in a link to http://images.google.com/images?q= plus the image filename. Firefox seriously dislikes replacing an element with another element that contains the original element, so we use the cloneNode method to make a copy of the original <img> element, put it in an <a> element, and then replace the original <img>.

Save the following user script as similarimages.user.js:

 // ==UserScript== // @name   Find Similar Images // @namespace   http://diveintomark.org/projects/greasemonkey/ // @description   links images to find similar images on Google Image Search // @include   http://* // @exclude   http://*.google.tld/* // ==/UserScript== for (var i = document.images.length - 1; i >= 0; i--) { var elmImage = document.images[i]; var usFilename = elmImage.src.split('/').pop(); var elmLink = elmImage.parentNode; if (elmLink.nodeName != 'A') { var elmLink = document.createElement('a'); elmLink.href = 'http://images.google.com/images?q=' + escape(usFilename); elmLink.title = 'Find images named ' + usFilename; var elmNewImage = elmImage.cloneNode(false); elmLink.appendChild(elmNewImage); elmImage.parentNode.replaceChild(elmLink, elmImage); } } 

6.4.2. Running the Hack

After installing the user script (Tools Install This User Script), visit http://randomness.org.uk/photos/index.cgi/months/may_2003. When you move your cursor over an image, you will see a tool tip displaying the filename of the image, as shown in Figure 6-6.

Each image on the page is now a link to a Google Images search for images of the same name. This can lead to some pretty random results, as shown in Figure 6-7.

Have fun exploring accidental cross-sections of the Web!

Figure 6-6. Image tool tips

Figure 6-7. Other images named P5170003