Show Hide Rollover Trick

A popular web design technique shows and hides entire sections of your web page when you roll over a button. For example, you can have 4 icons (each a model car) on the left. When you put your mouse on car icon 1, that car's photo and description shows up on the right. By rolling your mouse over the menu buttons, the cars show up without having to scroll.

The coding to pull off this technique is simple. The secret is the DIV tag. Here are the steps to showing and hiding sections of your web page when rolling over menu buttons:

1. Layout your web page with everything showing (all sections). For example layout 4 menu buttons on the left and 4 corresponding web page sections on the right.

2. Place these 2 lines of java script in the head tag. This does the actual flipping:


function HideDIV(d) { document.getElementById(d).style.display = "none";}
function DisplayDIV(d) { document.getElementById(d).style.display = "block";}


3. Place a DIV tag before each section and a /DIV after each section. Give each section a unique id. For example, the DIV tag for the first section looks like this:

div id="1"

4. Hide all but the first section by adding this style to DIV tags 2 through 4. This turns the section off so it doesn't display:

div id="2" style="display:none;"

5. Modify your menu list by adding a SPAN tag immediately before the menu option and a /SPAN tag immediately after each item. Each menu item must turn ON the appropriate section and turn OFF all others. For example, the code for the SPAN tag 4 is as follows:

span onmouseover="HideDIV('1');HideDIV('2'); HideDIV('3');DisplayDIV(4')"

This SPAN tag turns OFF DIV sections 1, 2, and 3 and turns ON DIV section 4. Each menu option needs to be coded this way.

That's it. Now when you roll your mouse over the menu option only the corresponding section will display.

Using only 2 lines of java script, DIV tags, and a style you can pull off this show/hide rollover trick. When you want to show and hide sections of your page based on rollovers, this is the clean way to do it.

PS. The brackets and script tags have been removed for technical reasons. For a sample page, or to implement this on your site, write us back.