Javascript Table Rollovers

Introduction

This tutorial will teach you how to get effects that are similar to those on the navigation at www.ctrlinternet.com. The techniques used are Javascript's onmouseover and onmouseout HTML attributes as well as CSS1 classes.

On many sites these days the webmasters designed them so that their navigation is in table cells or dividers (<div>s) sadly, we don't have a magic HTML tag that does the job for us so we are once again going to use CSS. Since CSS1 is supported in most browsers and sometimes we can't use CSS2 (because Internet Explorer 7 and under aren't CSS2 compatible)

Starting off...

Define the following ID and classes in your CSS stylesheet:

Done that? Okay, now we're going to add the Javascript code to the navigation table cells.

PHP site users

If you use PHP for your site, scroll down to the next section.

The code..

Put this code in for all your navigation cells, then mouseover them! You should get changing colours and text effects when you roll your mouse over them.

PHP site users

Here is your code, if you don't want to use it then use the other method.

And all you have to do in your table cells is this:

This effect is very good for any type of site with a table layout. You can do this with divs too if you have enough CSS knowledge. If you would rather do it with CSS2 then stay tuned for my next tutorial.

Related Articles

• The Basics- JavaScript Tutorial
  To get started with JavaScript, you will want to be able to see the tag that will set a script apart from the HTML. The tags used to begin and end a script are the tags. The opening tag should appear like this
• Creating an Image Gallery
  Create an image gallery in a common html site.
• Form Validation
  Learn the different ways of validating your form with Javascript.
• Full Screen
  Javascript allows you to display a page in full screen via a button, the script consists of 2 parts, the first one will be inserted between the and tags is:
• Statusbar Message
  This is a quick, and quite simple tutorial. Now its not html, it uses Javascript. What it does is lets you customize what it says in the status bar usually at the bottom left of your browser. Right now in your browser it should say Infinite Designs.org ..... Heres how to make it do that...
• JavaScript Browser Detection
  Browser detection allows you to find out what browser your viewer is using, and then perform a script based on it - or just to send a friendly message to those with your favorite browser.
• JavaScript Confirmation Boxes
  A javascript confirmation box can be a handy way to give your visitors a choice of whether or not an action is performed. A confirmation box will pop up much like an alert box, but will allow the viewer to press an OK or Cancel button.
• Stop Right Mouse Clicks
  Stop people from getting at your source by right clicking on your web page. Sounds good, but doesnt protect you totally, you can never fully protect your work, but it will make it harder.
• Beginner JS Pt. 1
  This tutorial is a well laid out recipe for basic Javascript. The article is brief and is limited to three topics: Calling the Script, Writing Comments, and Doing Stuff (Basic). Illustrations make it easy.
• Toggle Divs
  I have found a javascript that allows you to toggel a div by the div id, well here it is...

Contact Web Design Outsource and get started today