JavaScript Tutorial/GUI Components/Menu

Материал из Web эксперт
Перейти к: навигация, поиск

Dynamic menu based on onmouseout/onmouseover

<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.wbex.ru">AAA</a>
    </td>
</tr>
<tr>
    <td class="menu" bordercolor="black"
        id="choice2"
        onmouseover="selectlink(this,"BBB")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.ru">BBB</a>
    </td>
</tr>
<tr>
    <td class="menu" bordercolor="black"
        id="choice3"
        onmouseover="selectlink(this,"CCC")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.org/">CCC</a>
    </td>
</tr>
    <td class="menu" bordercolor="black"
        id="choice4"
        onmouseover="selectlink(this,"DDD")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.ru">DDD</a>
    </td>
</tr>
<tr>
    <td bordercolor="black" bgcolor="white" height="18">
      <font id="selectdesc" size="2"></font>
    </td>
</tr>
</table>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/GUI_Components/Menu&oldid=9187»