javascript+Css+div
html:
<link href="style.css" type=text/css rel=stylesheet>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.STYLE4 {font-size: 12px}
-->
</style>
<SCRIPT type=text/javascript>
var oldmenu = 1;
function changeTD(tdIndex)
{
td = document.getElementById("td" + tdIndex);
a = document.getElementById("a" + tdIndex);
content = document.getElementById("content" + tdIndex);
if(oldmenu!=0){
tdx = document.getElementById("td" + oldmenu);
ax = document.getElementById("a" + oldmenu);
contentx = document.getElementById("content" + oldmenu);
tdx.className = "hidden";
ax.className = "nav2_link";
contentx.className = "hiddencontent";
}
td.className = "active";
a.className = "nav1_link";
content.className = "activecontent";
oldmenu = tdIndex;
}
</SCRIPT>
<div>
<table width="100%" border="1" cellspacing="3" bordercolor="#FFFFFF">
<tr>
<td width="20%" align="center" bordercolor="#CCCCCC" class="active" id="td1"><table width="100%" border="0" cellspacing="4">
<tr>
<td align="center"><a class="nav1_link" id="a1" onmouseover="changeTD(1); return false;" target="_self">1</a> </td>
<td class="hidden" id="td2"><a class="nav2_link" id="a2" onmouseover="changeTD(2); return false;" target="_self">2</a></td>
<td class="hidden" id="td3"><a class="nav2_link" id="a3" onmouseover="changeTD(3); return false;" target="_self">3</a></td>
<td class="hidden" id="td4"><a class="nav2_link" id="a4" onmouseover="changeTD(4); return false;" target="_self">4</a></td>
<td class="hidden" id="td5"><a class="nav2_link" id="a5" onmouseover="changeTD(5); return false;" target="_self">5</a></td>
</tr>
</table>
<div class=activecontent id=content1>
1
</div>
<div class=hiddencontent id=content2>
2
</div>
<div class=hiddencontent id=content3>
3
</div>
<div class=hiddencontent id=content4>
4
</div>
<div class=hiddencontent id=content5>
5
</div>
</div>
style.css:
.active {
BACKGROUND-IMAGE: url(../images/pic01.jpg)
}
.hidden {
BACKGROUND-IMAGE: url(../images/menu_bg2.jpg)
}
.activecontent {
}
.hiddencontent {
DISPLAY: none
}