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!
Screen Pge

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

Memory(TRUE): 4194304/4194304
Memory(FALSE): 3268632/3278584