Ray's Test Pages - Different types of menu

Using a table ...

Choice 1 Choice 2 Choice 3 Choice 4 Choice 5 Choice 6 Choice 7

The code to produce this is

<div align="center">
<center>
<table border="3" cellspacing="0" bordercolor="#FF0000" width="80%" background="tile079.jpg" style="border-collapse: collapse" cellpadding="0">
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 1</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 2</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 3</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 4</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 5</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 6</b></font></td>
<td onMouseOver="style.cursor='hand'"; width="14%" align="center" bordercolor="#FF0000" onClick="location.href='menus1.htm';">
<font color="#0000FF"><b>Choice 7</b></font></td>
</tr>
</table>
</center>
</div>

By calling a piece of JavaScript from the onClick event, you can change all sorts of parameters. In order for this to work properly you need to give each cell an unique ID.

Choice 1 Choice 2 Choice 3

The code to draw the table is ...

<div align="center">
<center>
<table border="3" name="tmenu1" cellspacing="0" bordercolor="#0000FF" width="80%" background="tile079.jpg" style="border-collapse: collapse; color: 0000FF; font-weight: 900"; cellpadding="0">
<td ID="cmenu1" onMouseOver=intmenu("cmenu1") onMouseOut=outtmenu("cmenu1") width="14%" align="center" bordercolor="#0000FF" onClick="location.href='menus1.htm';">
Choice 1</td>
<td ID="cmenu2" onMouseOver=intmenu("cmenu2") onMouseOut=outtmenu("cmenu2") width="14%" align="center" bordercolor="#0000FF" onClick="location.href='menus1.htm';">
Choice 2</td>
<td ID="cmenu3" onMouseOver=intmenu("cmenu3") onMouseOut=outtmenu("cmenu3") width="14%" align="center" bordercolor="#0000FF" onClick="location.href='menus1.htm';">
Choice 3</td>
</tr>
</table>
</center>
</div>

and the JavaScript code functions in the HEAD section of the page are ...

<script language="JavaScript">
function intmenu(cellid){
document.getElementById(cellid).style.cursor="hand";
document.getElementById(cellid).style.color="FFFFFF";
window.status=document.getElementById(cellid).innerHTML;
}
</script>

<script language="JavaScript">
function outtmenu(cellid){
document.getElementById(cellid).style.color="0000FF";
window.status=""
}
</script>

Using buttons ...

The code for the buttons is ...

<form method="POST" name="bmenu">
<p align="center">
<input type="button" value="Choice 1" ID="bmenu1" name="B1" onClick="location.href='menus1.htm'" onMouseOver=inbmenu("bmenu1") onMouseOut=outbmenu("bmenu1") style="background-image:url('tile079.jpg'); font-weight: bold; color: 0000FF";>
<input type="button" value="Choice 2" ID="bmenu2" name="B2" onClick="location.href='menus1.htm'" onMouseOver=inbmenu("bmenu2") onMouseOut=outbmenu("bmenu2") style="background-image:url('tile079.jpg'); font-weight: bold; color: 0000FF";>
<input type="button" value="Choice 3" ID="bmenu3" name="B3" onClick="location.href='menus1.htm'" onMouseOver=inbmenu("bmenu3") onMouseOut=outbmenu("bmenu3") style="background-image:url('tile079.jpg'); font-weight: bold; color: 0000FF";>

and the JavaScript functions in the HEAD part of the page are ...

<script language="JavaScript">
function inbmenu(buttonid){
document.getElementById(buttonid).style.color="FFFFFF";
window.status=document.getElementById(buttonid).value;
}
</script>

<script language="JavaScript">
function outbmenu(buttonid){
document.getElementById(buttonid).style.color="0000FF";
window.status=""
}
</script>

The code has been test in Internet Explorer 6, Mozilla 1.4, Netscape 7.1 and Opera 7.11 and although they handle tables and the cursor effects differently they basically work the same way.

This page created 11th March 2004


GoStats stats counter