Inside Technique : Bookmarklets Introduction : 3 Lookup Bookmarklets

As I browse the web I often come across new terms or words that I do not fully understand. With the web, you are only a few clicks away from a dictionary. We created three bookmarklets that make it even easier to lookup any word that you select in your document.

The script works by extracting the user's selection and then opening a web-page to display the definition. Doing this requires only a few lines of script:

if (parseInt(navigator.appVersion)>=4) 
  if (navigator.userAgent.indexOf("MSIE")>0) { //IE 4+
    var sel=document.selection.createRange();
    sel.expand("word");
    void(window.open("http://www.dictionary.com/cgi-bin/dict.pl?term="
      + escape(sel.text)))
  } else  // NS4+
    void(window.open("http://www.dictionary.com/cgi-bin/dict.pl?term="
      + document.getSelection()))

This script is very simple. It extracts the user's selection and then looks up the selected word at dictionary.com. In IE4 we enhanced the script slightly to fully select any partially selected word. In Netscape, you are limited to accessing just the selection.

Also, all return values must be assigned to a variable or applied to the void operator. This is to ensure that the bookmarklet does not navigate the user form the current page to the value returned by the script.

When a script is converted to a bookmarklet it needs to be collapsed into a single line (remember to use semi-colons after each line of script) and specify the javascript: protocol:

<A HREF='javascript:if (parseInt(navigator.appVersion)>=4) if (navigator.userAgent.indexOf("MSIE")>0) {var sel=document.selection.createRange();sel.expand("word");void(window.open("http://www.dictionary.com/cgi-bin/dict.pl?term="+escape(sel.text)))} else void(window.open("http://www.dictionary.com/cgi-bin/dict.pl?term="+document.getSelection()))'>Define Word</A>.

With this simple technique for accessing the user's selection you can create your own custom lookup functions against your favorite sites. We created two additional bookmarklets that use an alternate site to lookup a definition. We created one for technical terms that uses TechWeb's technical dictionary and another that looks up similar words from Roget's Thesaurus. Custom lookup bookmarklets are created by modifying the path used in the script's window.open() method.

Below are our three lookup bookmarklets. You can add them to your browser by dragging them to your toolbar or adding them to your favorites:

• Define Word
• Thesaurus
• Technical Term

Bookmarklets provide so much flexibility that you can find a complete web-site dedicated to them at www.bookmarklets.com. The bookmarklets web-site contains over 150 free bookmarklets that you can quickly add to your browser.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.