<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//EN">
<html>
<head>
<title>Sliced Image</title>
<!-- Navbar def -->
<script language="JavaScript">
<!-- Dummy comment to hide code from non-JavaScript browsers.

if (document.images) {
Button1MouseOff = new Image(); Button1MouseOff.src = "Button1.gif"
Button1MouseOver = new Image(); Button1MouseOver.src = "Button1MouseOver.gif"
Button2MouseOff = new Image(); Button2MouseOff.src = "Button2.gif"
Button2MouseOver = new Image(); Button2MouseOver.src = "Button2MouseOver.gif"
Button3MouseOff = new Image(); Button3MouseOff.src = "Button3.gif"
Button3MouseOver = new Image(); Button3MouseOver.src = "Button3MouseOver.gif"
Button4MouseOff = new Image(); Button4MouseOff.src = "Button4.gif"
Button4MouseOver = new Image(); Button4MouseOver.src = "Button4MouseOver.gif"
}

function turnMouseOff(ImageName) {
if (document.images != null) {
document[ImageName].src = eval(ImageName + "MouseOff.src");
}
}

function turnMouseOver(ImageName) {
if (document.images != null) {
document[ImageName].src = eval(ImageName + "MouseOver.src");
}
}

// End of dummy comment -->
</script>
<!-- Navbar def end -->
</head>

<body bgcolor="#ffffff" text="black" link="red" vlink="blue" alink="yellow">
<table name="XaraTable" border="0" cellpadding="0" cellspacing="0">

<!-- shim row--><tr><td><img src="shim.gif" width="31" height="1" border="0"></td>
<td><img src="shim.gif" width="161" height="1" border="0"></td>
<td><img src="shim.gif" width="5" height="1" border="0"></td>
<td><img src="shim.gif" colspan="2" height="1" border="0"></td>
</tr>

<!-- Row 1 --><tr>
<td rowspan="8"><img name="r1c1" src="r1c1.gif" width="31" height="209" border="0"></td>
<td><img name="r1c2" src="r1c2.gif" width="161" height="32" border="0"></td>
<td rowspan="2" colspan="2"><img name="r1c3" src="shim.gif" width="6" height="68" border="0"></td>
<td><img src="shim.gif" width="1" height="32" border="0"></td></tr>

<!-- Row 2 --><tr>
<td><img name="Button1" src="Button1Selected.gif" alt="Button1" width="161" height="36" border="0"></td>
<td><img src="shim.gif" width="1" height="36" border="0"></td></tr>

<!-- Row 3 --><tr>
<td colspan="2"><img name="r3c2" src="r3c2.gif" width="166" height="11" border="0"></td>
<td rowspan="4"><img name="r3c4" src="shim.gif" width="1" height="94" border="0"></td>
<td><img src="shim.gif" width="1" height="11" border="0"></td></tr>

<!-- Row 4 --><tr>
<td colspan="2"><a href = "index2.htm" onmouseover="turnMouseOver('Button2')" onmouseout="turnMouseOff('Button2')"><img name="Button2" src="Button2.gif" alt="Button2" width="166" height="36" border="0"></a></td>
<td><img src="shim.gif" width="1" height="36" border="0"></td></tr>

<!-- Row 5 --><tr>
<td colspan="2"><img name="r5c2" src="r5c2.gif" width="166" height="11" border="0"></td>
<td><img src="shim.gif" width="1" height="11" border="0"></td></tr>

<!-- Row 6 --><tr>
<td colspan="2"><a href = "index3.htm" onmouseover="turnMouseOver('Button3')" onmouseout="turnMouseOff('Button3')"><img name="Button3" src="Button3.gif" alt="Button3" width="166" height="36" border="0"></a></td>
<td><img src="shim.gif" width="1" height="36" border="0"></td></tr>

<!-- Row 7 --><tr>
<td colspan="3"><img name="r7c2" src="r7c2.gif" width="167" height="11" border="0"></td>
<td><img src="shim.gif" width="1" height="11" border="0"></td></tr>

<!-- Row 8 --><tr>
<td colspan="3"><a href = "index4.htm" onmouseover="turnMouseOver('Button4')" onmouseout="turnMouseOff('Button4')"><img name="Button4" src="Button4.gif" alt="Button4" width="167" height="36" border="0"></a></td>
<td><img src="shim.gif" width="1" height="36" border="0"></td></tr>

<!-- Row 9 --><tr>
<td colspan="4"><img name="r9c1" src="r9c1.gif" width="198" height="192" border="0"></td>
<td><img src="shim.gif" width="1" border="0"></td></tr>
</table>
<p>

</body>
</html>

Back to the navbar example