Layer-rollover version 4.0


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.


Getting Started

First of all, download the following file.

Download "pages.zip"!

Make your donations to Anime Theme! Support us!  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

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

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

Replace the variables with your numbers.


Known bugs and limitations


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.

Still have questions? Check out DHTML Forum!


Return to Dynamic HTML Resource Center