Greasemonkey Hacks

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.

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 ...