<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<!--
Code copyright 2005 by Computeledge, Inc.
GPL License
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rollover Demo</title>
<script language="Javascript" type="text/javascript">
<!--
// Preload images to be manipulated into array
var onImages = new Array;
onImages[0] = new Image(183,226);
onImages[0].src = "mmouse.gif";
onImages[1] = new Image(183,226);
onImages[1].src = "minnie.gif";
onImages[2] = new Image(183,226);
onImages[2].src = "donald.gif";
onImages[3] = new Image(183,226);
onImages[3].src = "daisy.gif";
var offImages = new Array;
offImages[0] = new Image(183,226);
offImages[0].src = "blank.jpg";
function imageOn(i)
{
//switch visible image to onImages[i]
document.images[0].src = onImages[i].src;
//switch background color on element to blue
if ( i == 0 )document.getElementById("s0").style.background="#0000ff";
if ( i == 1 )document.getElementById("s1").style.background="#0000ff";
if ( i == 2 )document.getElementById("s2").style.background="#0000ff";
if ( i == 3 )document.getElementById("s3").style.background="#0000ff";
}
function imageOff(i)
{
//switch visible image to blank.jpg
document.images[0].src = offImages[0].src;
//switch background color on element to darkblue
if ( i == 0 )document.getElementById("s0").style.background="#000099";
if ( i == 1 ) document.getElementById("s1").style.background="#000099";
if ( i == 2 ) document.getElementById("s2").style.background="#000099";
if ( i == 3 )document.getElementById("s3").style.background="#000099";
}
//-->
</script>
<style type="text/css">
<!--
td{
font-family:arial,helvetica,sans-serif;
font-weight:bold;
font-size:11pt;
background:#000099;
color:#ffffff;
height:25px;
width:100px;
text-align:center;
}
div.main{
margin-left:auto;
margin-right:auto;
width:400px;
font-family:arial,helvetica,sans-serif;
}
div.large{
font-size:20pt;
font-weight:bold
}
div.small{
font-size:8pt;
font-weight:normal
}
table{
width:400px;
margin-top:5px
}
div.frame{
height:250px;
width:200px;
background:#ffffff;
padding-top:20px;
padding-left:100px;
padding-right:100px;
}
-->
</style>
</head>
<body style="text-align:center">
<div class="main">
<div class="large">Disney Characters</div>
<div class="small">Place your mouse over the name, and a picture of the
character will appear.</div>
<table ><tr>
<td id="s0" onMouseover="imageOn(0);" onMouseOut="imageOff(0);">Mickey</td>
<td id="s1" onMouseover="imageOn(1);" onMouseOut="imageOff(1);">Minnie</td>
<td id="s2" onMouseover="imageOn(2);" onMouseOut="imageOff(2);">Donald</td>
<td id="s3" onMouseover="imageOn(3);" onMouseOut="imageOff(3);">Daisy</td>
</tr></table>
<div class="frame">
<img src="blank.jpg" width="183" height="226" alt="Disney Character" >
</div>
</div>
</body>
</html>