Dynamic menu based on onmouseout/onmouseover : Menu « GUI Components « JavaScript Tutorial






  1. JavaScript Tutorial
  2. GUI Components
  3. Menu
<html>
<head>
<style type="text/css">
td.menu {font-family:Arial;
        font-weight:bold;
        background-color:blue;
        cursor:hand}
a{
    text-decoration:none;
    color:black;
}
</style>
<script language="javascript" type = "text/javascript">
<!--
function selectlink(currentDell,linkdesc){
    currentDell.style.background='yellow';

    if (document.getElementById)
      document.getElementById("selectdesc").innerHTML=linkdesc;
    else
      selectdesc.innerHTML=html;
}
function leavelink(currentDell){
    currentDell.style.background='blue';

    if (document.getElementById)
      document.getElementById("selectdesc").innerHTML='&nbsp;';
    else
      selectdesc.innerHTML='&nbsp;';
}
//-->
</script>
</head>
<body>
<table width=200>
<tr>
    <td class="menu" bordercolor="black"
        id="choice1"
        onmouseover="selectlink(this,'AAA')"
        onmouseout="leavelink(this)"">

           <a href="http://www.java2s.com">AAA</a>
    </td>
</tr>
<tr>
    <td class="menu" bordercolor="black"
        id="choice2"
        onmouseover="selectlink(this,'BBB')"
        onmouseout="leavelink(this)">

           <a href="http://www.java2s.com">BBB</a>
    </td>
</tr>
<tr>
    <td class="menu" bordercolor="black"
        id="choice3"
        onmouseover="selectlink(this,'CCC')"
        onmouseout="leavelink(this)">

           <a href="http://www.java2s.org/">CCC</a>
    </td>
</tr>
    <td class="menu" bordercolor="black"
        id="choice4"
        onmouseover="selectlink(this,'DDD')"
        onmouseout="leavelink(this)">

           <a href="http://www.java2s.com">DDD</a>
    </td>
</tr>
<tr>
    <td bordercolor="black" bgcolor="white" height="18">
      <font id="selectdesc" size="2"></font>
    </td>
</tr>
</table>
</body>
</html>








28.2.Menu
28.2.1.Dynamic menu based on onmouseout/onmouseover