[Javascript] MouseOver changes Background

[Paul Novitski]

At 08:18 AM 7/6/2004, Scott Hamm wrote:
>I got a list of colors and would like to write JavaScript that changes
>background when mouse hoovers over anchored link:
>
>My existing code is as follows:
><ul>
><li>
>         <a href="LTGREEN.html" title="LightGreen"
>style="background:#90ee90;">
>                 <p class=name>LightGreen</p>
>                 <p class=num>144 238 144</p>
>                 <p class=webid>#90EE90</p>
>         </a>
></li>
><snip>
></ul>


Scott,

I would change each anchor's "background" to "background-color" and I'd 
give your UL tag an id such as "ColorList" to make it easy to find.

On page load, I'd walk the DOM assigning hover events to those links:

         function PageLoad()
         {
                 // locate the list
                 var oList = document.getElementById("ColorList");

                 // collection of links in the list
                 var aAnchors = oList.getElementsByTagName("A");

                 // for each link, assign event
                 for (var iA = 0; iA < aAnchors.length; iA++)
                 {
                         aAnchors[iA].onmouseover = SetPageColor;
                 }
         }

The onmouseover() function could look like this:

         function SetPageColor()
         {
                 document.body.style.backgroundColor = 
this.style.backgroundColor;
         }

Paul