IMPORTANT NOTE: You are allowed to use this script provided that all comments and copyright notice are left intact. This script can be used for personal, non-commercial purpose.
From version 4.0 and onward, this script will also work with Netscape 6 and Mozilla (Gecko). Since Mozilla is still in the beta stage and under development, this script will change from time to time to support the latest browser features. The current version of script has been tested to work with Netscape 6 PR1 (M14).
If you are upgrading from a previous version, you will notice some changes of syntax. Please read the instructions again and make necessary changes in your current codes for this version of script to work.
First of all, download the following file.
Support Anime Theme to provide MORE scripts! Thanks!
This script when used on a page has the following layout.
<HTML>
<BODY>
<!-- Navigation Interface, consisted of links, image maps, etc -->
<DIV id=layer0 ......>
</DIV>
.
.
.
<DIV id=layer[N] ......>
</DIV>
</BODY>
</HTML>
Now it's time to design the navigation interface (usually some links) to control the rollover. The interface is usually a combination of links or image maps (when the cursor is placed over them the corresponding layers will be displayed) and the interface should be placed BEFORE all the layers. Inside each link tag of the interface, insert the following line.
onMouseOver="layerOver(num)" onMouseOut="layerOut()"
Where
- num is the number identifying the corresponding layer. Start at 0 and increase by 1 for each successive layer.
Example: <a href="test.htm" onMouseOver="layerOver(0)" onMouseOut="layerOut()">
Then insert the content layers AFTER the navigation interface. Each layer has the following format.
<DIV id=layerNUM class=page>
<!-- Content here -->
</DIV>
Where
- NUM is the number identifying the corresponding layer. Start at 0 and increase by 1 for each successive layer.
You can put anything inside the layer as the content. When designing the content of the layers, have an idea in mind that all layers will be displayed in normal flow when viewed with old browsers.
After inserting all the layers, locate the following lines in your page.
var page_max = 0
var page_height = 0
var delay = 400
Where
- page_max is the total number of layers used.
- page_height is the height of the rollover region. By default it is 0, and that means the value will be automatically assigned according to the dimensions of the layers. If a positive number is assigned and the visitor is using MSIE 4+ or Netscape 6, scroll bars will appear for overflowing layers.
- delay is the length of time delay before the corresponding layer is shown when the cursor is placed over the navigation interface. The time is measured in ms. By default it is 400ms.
Replace the variables with your numbers.
Take a look at "demo.html" included in the zip for an example of HTML document using this script. Make sure that you upload your HTML document as well as all ".js" files to the web server for the script to work.
You are always recommended to test the page before sending it online. If you still have problems, email me. Please include the file you are working on in your email.
Return to Dynamic HTML Resource Center