Navigation Bar--Dynamically change the background color of the navigation menu

1. Overview

When browsing some websites, the background color will switch to other colors when the mouse passes through an item in the navigation menu, so this simple effect will attract the attention of the visitors.

2. Technical Highlights

This example mainly applies the JavaScript method to dynamically change the background color of the <td> tag. The onmouseover event is triggered when the mouse passes through the <td> represented navigation menu, and then the custom JavaScript method is called to change the background color of <td>, and when the mouse is moved out of <td>, Triggers the onmouseout event, invoking a custom JavaScript method to restore the background color to the initial value.

When you change the property value of a <td> tag in JavaScript, you need to set an ID value for <td>, and then in the JavaScript method, you can get the Cell object based on the getElementById () method of the Document object , you can then modify the properties of the Cell object. As shown in the following code, shows how to modify the background color of a cell with ID TD1.

document.getElementById ("TD1"). style.background= "Skyblue";   

3. Concrete implementation

(1) Create the index.jsp page, write the mouse over the event of the JavaScript method over () and the mouse out of the event method out (), in both methods, modify the background color of the cell, the key code is as follows:

<script type= "Text/javascript" >      function over (ID) {            document.getElementById (ID). Style.background= "Skyblue";        }       function out (ID) {            document.getElementById (id). style.background= "White";      } </script>

(2) In the <td> tab of each navigation menu, set the onmouseover event to invoke the Over () method of JavaScript and set the onmouseout event to invoke the Out () method of JavaScript. The key code is as follows:

<TD width= "id=" TD1 "onmouseover=" Over (' TD1 ') "onmouseout=" Out (' TD1 ') "><a href="/http Www.mingribook.com "> Tomorrow Book </a></td><td width=" "id=" TD2 "onmouseover=" Over (' TD2 ') "onmouseout=" Out (' Td2 ') "><a href=" http://www.mingrisoft.com "> Tomorrow software </a></td><td width=" Up "id=" TD3 " Onmouseover= "Over (' td3 ')" onmouseout= "Out (' td3 ')" ><a href= "http://www.mingrisoft.com" > About Tomorrow </a> </TD><TD width= "Up" id= "TD4" onmouseover= "Over (' td4 ')" onmouseout= "Out (' td4 ')" ><a href= "#" > Purchase Notice </A></TD><TD width= "id=" TD5 "onmouseover=" Over (' TD5 ') "onmouseout=" Out (' Td5 ') "><a href=" Http://www.mingribook.com "> Contact Us </a></td>

Navigation Bar--Dynamically change the background color of the navigation menu