XHTML Compatible Image Flip
Quick Overview
Many sites nowadays (this one included) use an image flip for links. That is, an image displays one thing before it's clicked, and a different image when the mouse is hovering over it. The classic implementation is not valid XHTML 1.1, however, as it uses depreciated
JavaScript. Here's how to do it properly.
Header
Put the following code in your <head>...</head> section.
<script type="text/javascript"><br />
<!-- <br />
function swap(id,img) {<br />
document.images[id].src=img;<br />
}<br />
--><br />
</script>
Main Document
Then, place the following code in your document
<a href="page.html" class="noborder"<br />
onmouseover="swap('uniqid','image-flipped.png')"<br />
onmouseout="swap('uniqid','image-original.png')"><br />
<img id="uniqid" src="image-original.png" alt="Alt T
ext" /><br />
</a>
The uniqid must be defined uniquely for each imageflip on a page. The class="noborder" is a CSS class I defined to remove the box most browsers put around a link (e.g., on the mikeage.net logo above).
Enjoy.
