SL8R.co.uk - Code Zone

Code, Code and Code

SL8R.co.uk - Code Zone header image 2
← PHP: Add Slashes to text PHP: Select the latest image or file in a folder →

Javascript: CSS rollover List routine

June 18th, 2008 · No Comments

To quickly loop through a list node and set a rollover CSS value, use the following

// Set all LI of a node to rollover CSS
// Use two CSS class, e.g. item and itemover

function updateList(String nodename)
{
    if (document.all&&document.getElementById)
    {
        navRoot = document.getElementById(nodename);
        for (i=0; i<navRoot.childNodes.length; i++)
        {
            node = navRoot.childNodes[i];
            if (node.nodeName==“LI”)
                {
                    node.onmouseover=function()
                    {
                        this.className+=“over”;
                    }
                    node.onmouseout=function()
                    {
                        this.className=this.className.replace(“over”, “”);
                    }
               }
          }
     }
}

<body>
<script>window.onload=updateList;</script>
</body>




Technorati Tags: ,,,


							

			
Tags: Code

			

			
			






	
0 responses so far ↓

	
	
    

	
		 
			
				
  • 
					
    
						
    There are no comments yet...Kick things off by filling out the form below.
    
					
    
				
    • 

		
	


	

	
		
		
			
Leave a Comment