Image Rollovers with alt Text

Started on 2009-11-28, updated draft on 2009-11-28 and 2012-05-04.

(This technique might have been bettered in June 2010 by revised Nash Image Replacement.)

The HTML starts off the same as any normal navigation list: 

<div id="nav">
<ul>
 <li><a href="/">Home</a>
 <li><a href="/contact">Contact Us</a>
 <li><a href="/about/">About Us</a>
 <li><a href="/stores/">Store Finder</a>
 <li><a href="/products/">Products</a>
 <li><a href="/sitemap">Site Map</a>
</ul>
</div>

Images are added and the link text is associated with them: 

<div id="nav">
<ul>
 <li><a href="/"><img width="…" height="…" src="…" alt="Home"></a>
 <li><a href="/contact"><img width="…" height="…" src="…" alt="Contact Us"></a>
 <li><a href="/about/"><img width="…" height="…" src="…" alt="About Us"></a>
 <li><a href="/stores/"><img width="…" height="…" src="…" alt="Store Finder"></a>
 <li><a href="/products/"><img width="…" height="…" src="…" alt="Products"></a>
 <li><a href="/sitemap"><img width="…" height="…" src="…" alt="Site Map"></a>
</ul>
</div>