Illustrate Any Web Site

The Code

The first part of this hack is server-side retrieval of a random image, written here in VBScript for classic ASP. This script accepts an incoming word with the querystring variable q, sends a request to the Yahoo! Image API, and selects a random result from the response. The script then uses the random image to write some HTML to display the image, which will end up in an HTML <iframe>element inside the page the script is called from.

Save the following code to a file called yr.asp and be sure to create and use a unique application ID for the script:

	<html>
	<head>
	<style type="text/css">
		body{background-color:#fff;color:#000;margin:0px;padding:0px;border: 
	0px;} 
	</style> 
	</head>

	<body scroll="no">
	<%
	On Error Resume Next
	Response.Buffer = True

	'' Expecting a search term to be in the querystring "q"
	szQ = Request("q")
	If (szQ <> "") Then
		Dim objXML, xml 
		set xml = Server.CreateObject("MSXML2.ServerXMLHTTP.3.0")
		
		szGetString = ("http://api.search.yahoo.com/" &_
				   "ImageSearchService/V1/imageSearch" &_ 
				   "?appid=[YOUR_APPLICATION_ID]&results=10&query=" & szQ)
		
		xml.Open "GET", szGetString, False
		xml.Send
		set objXML = xml.responseXML

		If (objXML.getElementsByTagName("Result").length>0) Then

			'' Fetch a random image within the set returned 
			Randomize 
			ano = Int(((objXML.getElementsByTagName("Result").length-1) * Rnd))

			Set oGb = objXML.getElementsByTagName("Result")(ano) 
			Set oTn = oGb.getElementsByTagName("Thumbnail")(0)
			
			Response.write("<a target='_top' href='") 
			Response.write(oGb.getElementsByTagName("RefererUrl")(0).text) 
			Response.write("'><img title='" & szQ & "' alt='" & szQ & "' ") 
			Response.write("src='" & oTn.getElementsByTagName("Url")(0).text & "'")
			Response.write(" style='border:0px;'/></a>")	
		End if 
		Set oGb = Nothing
		Set oTn = Nothing
		set xml = Nothing
		set objXML = Nothing

	End if %>
	</body>
	</html>

Upload yr.asp to a publicly available web server and you're halfway there!

Now we need to call the ASP page in-context so that it will swap an image for selected text. To do this, we'll use JavaScript embedded in a bookmark—also known as a bookmarklet or favelet. This JavaScript is designed to function in either IE4+ or Mozilla/Firefox.

Here's the yReplacer JavaScript bookmarklet code, expanded for easy reading. Note that you'll need to include the location of yr.asp in the code:

	function p(){
	u='http://example.com/yr.asp?q=';
	if(document.all){
		//IE version
		r=document.selection.createRange();
		r.pasteHTML('<iframe scrolling=no style=\'width:75;height:75;border
:0;\' src=\''+u+r.text+'\'/>')
	}else{ 
		//Mozilla/Firefox version        
		var g=window.getSelection(); 
		r=g.getRangeAt(0); f=document.createElement('IFRAME'); 
		f.setAttribute('scrolling','no'); 
		f.setAttribute('style','width:75;height:75;border:0'); 
		f.setAttribute('src',u+g);        
		r.deleteContents(); 
		r.insertNode(f)
	}
}
p();

This JavaScript inserts an HTML <iframe> in place of the currently selected word and uses yr.aspwith that word as the source for the frame.