A JavaScript Rollover allows you to change the content of part of your web page when your visitors hover their mouse pointer over an object on your web page. Examples of rollovers (also called MouseOvers) include a button that changes (such as depressed or pressed) when the mouse hovers over it, or maybe the button may change color or animate. Another example is when your visitor hovers their mouse over a link or graphic image, and another portion of your web page changes. This is useful for describing links or images, providing tool tips, and more. We'll take a look at both types of scripts.

The JavaScript Rollover Button

This is probably the simplest and easiest to use. Basically, when your visitor hovers over a graphical button on your web page, the button will change to another image. The second image can be a pressed version of the button, a different color, or even animated.

To get started, create two versions of each button you wish to have on your web page. For example, Home and Links would require a total of 4 buttons to be made, instead of two. One is going to be what the button looks like when the mouse is not over it, and the other will be what the button looks like when someone hovers over the button.

You can use the DOM Image Rollover v3.0 from Dynamic Drive. There are full instructions on the web page there to help you add the script to your page.

Note that the first button will be the first image referenced in the image tag, and the second button will be the image referenced in the domroll class in the image tag.

Content Change MouseOver Effect

Another common and very useful effect is one where your visitor will hover over a link or image, and another part of your web page will change. We'll take a look at how it is done. We will be working with the Tabs Menu (mouseover) script from Dynamic Drive. First, you will need to add the following code to your link tags. The 'x' should be replaced by a sequential number starting from zero.

onMouseOver='showit(x);

For example, here is how link tags would look with the new code inserted:

<a href='yourhome.html' onMouseOver='showit(0);'>Home</a>
<a href='yourlinks.html' onMouseOver='showit(1);'>Links</a>
<a href='yourcontact.html' onMouseOver='showit(2);'>Contact</a>

Note that you can put these blocks of code within tables as well. The above block would be where you would put your navigation or menu items.

Now in another table cell, you'd want to put the following code:

<ilayer width="240" height="315" name="dep1">
<layer name="dep2" width="240" height="315">
</layer>
</ilayer>
<div id="describe" onMouseover="clear_delayhide()" onMouseout="resetit(event)">

Change the width and height to that of your table sell.

Now you will want to set up the area for the default text which will show when the page is loaded, even though none of the links were hovered over. If you do not do this, the area will appear blank. This area should be text you would want to display for the first link. For example:

<div align="justify">
This is the home page where you can return to at any time.
</div>

Now after this, in that same cell, you want to put the code that appears after the Tabs Menu (mouseover)- By Dynamic Drive area in comments. Be sure to get all the code in place up to the point where it says No need to edit beyond here. We will now edit this portion of the code.

Note each submenu[0]=''; area that has text in it. You want to have only one for each of your menu items. Be sure the numbers in the brackets [] match those of the menu item. In the quote marks '' place your text which you want to describe your link. Here is an example:

submenu[0]='This is the Home page, which you can return to any time.'
submenu[1]='Here are a list of links for you to look at.'
submenu[2]='Here you can contact me at any time.'

If you want to use an apostrophe in your text such as for the word you're you need to preceed it with a backslash, as in you\'re. This keeps the script from confusing the end of your text with an apostrophe. This holds true if you plan to use a backslash. Such as word\work\text would be written instead as word\\work\\text.

You can also use HTML tags to display images, center text and images, etc. Just be sure that you use a backslash if you're going to need to use an apostrophe or backslash in your HTML code, as noted above.

Now you can finsh the code by copying and pasting the reast of the JavaScript code from the No need to edit beyond here point to the end of the script into your HTML page. Go ahead and test your links by hovering over them. If you have a problem getting it to work right, go back over the editing you had done and be sure that there are no characters out of place or missing. Sometimes simply syntax errors, such as a missing character or an apostophe in the wrong place can cause the script to not work.

NOTE: Before you close your table cell tag, you want to put another </div> at the end, since we used the <div id="describe" onMouseover="clear_delayhide()" onMouseout="resetit(event)"> in our code. Always be sure that any opened tags also have a closing tag.