Hack 70. Make Image alt Text Visible

Display otherwise invisible information in image alt attributes as a tool tip.

In the HTML specifications, there are two attributes designed to allow text to be attached to an image: alt and title. The alt attribute is short for alternate, and it is designed to display when the image itself cannot. The title attribute is designed as an extra title to show when a user hovers his mouse over the image. Most browsers function this way. Microsoft's Internet Explorer, however, will treat an alt attribute as a title, and display it as a tool tip.(To be fair, Microsoft did this to emulate the broken behavior of Netscape 4.) As a result, many less-informed web site maintainers use alt as if it was made to display a tool tip. When using a compliant browser like Firefox, this information is inaccessible!

With the magic of Greasemonkey, though, we can resurrect this information. This hack makes all alt attributes for images appear as their tool tips, by assigning the text to the title attribute instead.

8.5.1. The Code

This user script runs on all pages. First, we execute an XPath query to find all the <img> and <area> elements; these are the elements usually assigned <alt> text where the author intended a <title>. Then, a simple for loop evaluates each element returned from the query. For each <img> or <area> that has an empty title attribute and a nonempty alt attribute, we copy the alt text into the title.

Save the following user script as alt-tooltips.user.js:

 // ==UserScript== // @name Alt Tooltips // @namespace http://www.arantius.com/ // @description Display Alt text as tooltip if no title is available // @include * // ==/UserScript== // based on code by Anthony Lieuallen // and included here with his gracious permission var res = document.evaluate("//area|//img", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); var i, el; for (i=0; el=res.snapshotItem(i); i++) { if (''==el.title && ''!=el.alt) el.title='ALT: '+el.alt; } 

8.5.2. Running the Hack

Before installing this script, browse to any page that contains images with alt attributes, and they will be visible as tool tips when you hover your cursor over the image. For example, the Google home page uses an image with alt text, but no title. Pointing your mouse at the image does nothing, as shown in Figure 8-4.

Figure 8-4. Unmodified Google home page

Now install the script (Tools Install This User Script) and refresh the Google home page. The alt text in the logo is revealed when you hover your mouse over the image, as shown in Figure 8-5.

Figure 8-5. Google home page with alt tool tips

8.5.3. Hacking the Hack

As shown in "Master XPath Expressions" [Hack #8], XPath is a language all its own. The logic used in the loop can be fit into a more complex XPath query:

 var res = document.evaluate("(//img|//area)[not(@title) and not(''=@alt)]", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 

With this XPath query, we can simplify the code inside the loop:

 var res = document.evaluate("(//img|//area)[not(@title) and not(''=@alt)]", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); var i, el; for (i=0; el=res.snapshotItem(i); i++) { el.title='ALT: '+el.alt; } 

I call this trading complexity. The overall code is not simpler; we've just moved the complexity from one part to another. The end result is the same, so it boils down to a matter of style.

Anthony Lieuallen