mikeage.net Logo

mikeage.net @ י״ט אדר ב' תשע״ט

Posts Tagged ‘Image Flip’

XHTML Compatible Image Flip

‍‍ז׳ מנחם אב תשס״ה - Friday, August 12th, 2005

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


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): 4194304/4194304
Memory(FALSE): 3249704/3259656