<script type="text/javascript">
//<![CDATA[
// Keep these names in variables so that
// they need to be changed in only one place.

// These variables are for the "thumbnails" 
var imgDirectory = "rollover/";

// These variables are for the larger picture
var bigPicSuffix = ".jpg";
var bigPicName = "bigPicture";
var emptyURL = imgDirectory + "empty.png";

// This array is needed for preloading the big pictures
var imgName = new Array(
    "cat",
    "korea",
    "lincoln"
);

var preload = new Array( imgName.length );
var imgNum;

for (imgNum = 0; imgNum < imgName.length; imgNum++)
{
    preload[imgNum] = new Image( );
    preload[imgNum].src = imgDirectory + imgName[imgNum] + bigPicSuffix
}

function showBig( imageName )
{
    var bigPicURL;
       
    bigPicURL = imgDirectory + imageName + bigPicSuffix;
    document[bigPicName].src = bigPicURL;
}

function showEmpty( )
{
    document[bigPicName].src = emptyURL;
}
// ]]>
</script>

<table border="0" cellpadding="6">
<tr>
<td style="border-right: 1px dotted black">
<p><a href="#" onmouseover="showBig('cat');"
    onmouseout="showEmpty( );"><img src="rollover/cat1.jpg"
    name="cat" alt="Small picture of cat" 
    width="64" height="48" border="0" /></a></p>

<p><a href="#" onmouseover="showBig('korea');"
    onmouseout="showEmpty( );"><img src="rollover/korea1.jpg"
    name="korea" alt="Small picture of Korea"
    width="64" height="48" border="0" /></a></p>

<p><a href="#" onmouseover="showBig('lincoln');"
    onmouseout="showEmpty( );"><img src="rollover/lincoln1.jpg"
    name="lincoln" alt="Small picture of Abraham Lincoln"
    width="64" height="48" border="0" /></a></p>
</td>
<td>
    <img src="rollover/empty.png" alt="Roll over buttons to show picture"
        name="bigPicture" width="256" height="192" border="0" />
</td>
</tr>
</table>