mikeage.net Logo

mikeage.net @ י״א תמוז תשפ״א

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.


Put the following code in your <head>...</head> section.

&lt;script type=&quot;text/javascript&quot;&gt;<br />
&lt;!-- <br />
function swap(id,img) {<br />
document.images[id].src=img;<br />
}<br />
--&gt;<br />

Main Document

Then, place the following code in your document

&lt;a href=&quot;page.html&quot; class=&quot;noborder&quot;<br />
onmouseover=&quot;swap('uniqid','image-flipped.png')&quot;<br />
onmouseout=&quot;swap('uniqid','image-original.png')&quot;&gt;<br />
&lt;img id=&quot;uniqid&quot; src=&quot;image-original.png&quot; alt=&quot;Alt T
ext&quot; /&gt;<br />

The uniqid must be defined uniquely for each imageflip on a page. The class=&quot;noborder&quot; is a CSS class I defined to remove the box most browsers put around a link (e.g., on the mikeage.net logo above).


Leave a Reply

Quick Map
Content +
Personal +
Archives +
Site Stuff +
RBS Weather +
Search +
Recent Images

Valid XHTML 1.1!
Printer Friendly Page

Last Modified: September 04, 2006 @ 02:11 CST

Memory(TRUE): 2097152/2097152
Memory(FALSE): 2793688/2803640