Ok, I've played around with it enough 
Here is the online demo, and here's the source:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sarah</title>
<style type='text/css'>
body {
margin: 0;
padding: 20px 40px;
color: #000;
background: #FFF;
font-family: verdana,arial,helvetica,sans-serif;
}
img {
border:1px dotted blue;
display:block;
float:left;
width:176px;
height:225px;
margin:4px;
}
li {
margin:.5em 0;
}
#boxContainer {
position:relative;
width:50%;
}
#box0, #box1, #box2, #box3, #box4 {
position:absolute;
left:0;
top:0;
border-style: none;
color: black;
background-color: white;
padding: 0px;
}
#box1, #box2, #box3, #box4 {
display:none;
}
</style>
<script type='text/javascript' src='../x/x_core.js'></script>
<script type='text/javascript' src='../x/lib/xopacity.js'></script>
<script type='text/javascript'>
var gBox = null; // the box currently visible
window.onload = function()
{
var i = 1, a;
while (null != (a = xGetElementById('lnk' + (i++)))) {
a.onmouseover = lnkOver;
a.onmouseout = lnkOut;
}
gBox = xGetElementById('box0');
}
function lnkOver()
{
chkTmr();
fadeOut(gBox.id);
gBox = xGetElementById('box' + this.id.substr(3));
chkTmr();
xOpacity(gBox, 0);
gBox.style.display = 'block';
fadeIn(gBox.id);
}
function lnkOut()
{
chkTmr();
fadeOut(gBox.id);
gBox = xGetElementById('box0');
chkTmr();
xOpacity(gBox, 0);
gBox.style.display = 'block';
fadeIn(gBox.id);
}
function chkTmr()
{
if (gBox.fadeTmr) {
clearTimeout(gBox.fadeTmr);
gBox.fadeTmr = null;
}
}
function fadeOut(id)
{
var d = .1, o = xOpacity(id); // adjust rate of fade with 'd'
var e = xGetElementById(id);
if (o - d > 0) {
e.fadeTmr = setTimeout("fadeOut('" + id + "')", 50);
xOpacity(id, o - d);
}
else {
xOpacity(id, 0);
e.style.display = 'none';
e.fadeTmr = null;
}
}
function fadeIn(id)
{
var d = .1, o = xOpacity(id); // adjust rate of fade with 'd'
var e = xGetElementById(id);
if (o + d < 1) {
e.fadeTmr = setTimeout("fadeIn('" + id + "')", 50);
xOpacity(id, o + d);
}
else {
xOpacity(id, 1);
e.fadeTmr = null;
}
}
</script>
</head>
<body>
<div>
<a id='lnk1' href="test1.html" title="test1"><img src="test1.jpg" width="176" height="225" border="0"></a>
<a id='lnk2' href="test2.html" title="test2"><img src="test2.jpg" width="176" height="225" border="0"></a>
<a id='lnk3' href="test3.html" title="test3"><img src="test3.jpg" width="176" height="225" border="0"></a>
<a id='lnk4' href="test4.html" title="test4"><img src="test4.jpg" width="176" height="225" border="0"></a>
<p style='clear:both'></p>
</div>
<div id='boxContainer'>
<div id="box0">
<h3>box0</h3>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor</p>
<p>This was 'mainbox'.</p>
</div>
<div id="box1">
<h3>box1</h3>
<p>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
<p>Sarah, we really appreciate everything you do (and have done) for the forums!</p>
</div>
<div id="box2">
<h3>box2</h3>
<p>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
<p>The animation of opacity in this demo is quite simple compared to <a href='http://cross-browser.com/x/examples/xaniopacity.html'>xAniOpacity</a>.</p>
</div>
<div id="box3">
<h3>box3</h3>
<p>dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>This demo uses 4 functions from the X Library: <a href='http://cross-browser.com/x/lib/view.php?sym=xOpacity'>xOpacity</a>, <a href='http://cross-browser.com/x/lib/view.php?sym=xGetElementById'>xGetElementById</a>, <a href='http://cross-browser.com/x/lib/view.php?sym=xDef'>xDef</a> and <a href='http://cross-browser.com/x/lib/view.php?sym=xStr'>xStr</a>. It doesn't <i>require</i> functions from X, you can use your own equivalents.</p>
</div>
<div id="box4">
<h3>box4</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>The dang tooltip causes mouseout/mouseover events!</p>
</div>
</div> <!-- end boxContainer -->
</body>
</html>
Bookmarks