Metachecker.net
|
FontsMadeEasy.com
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Pull Down Surfing - Layers
[View Sample]
Here's is an example of using layers and pull down surfing.
Insert into <HEAD>
<script> <!-- Hide from old browsers function layeron(){ document.layers['layer1'].clip.bottom = 100; } function layeroff(){ document.layers['layer1'].clip.bottom = 22; } // --> </script>
Insert into <BODY>
<LAYER NAME="layer1" LEFT=200 TOP=75 BGCOLOR=#C0C0C0 WIDTH=140 CLIP="-2,0,140,22" onMouseOver="layeron();" onMouseOut="layeroff();"> <b>YOUR TITLE</b><br> <font size=-1> <A HREF="YOUR LINK">YOUR LINK DESCRIPTION</A><br> <A HREF="YOUR LINK">YOUR LINK DESCRIPTION</A><br> <A HREF="YOUR LINK">YOUR LINK DESCRIPTION</A><br> <A HREF="YOUR LINK">YOUR LINK DESCRIPTION</A><br> </font> </LAYER> <br><br><br>
Other Options
Here's is an example of using layers and pull down surfing. To get this to work right you need to do a lot of tweeking with numbers, until things look right. The cool thing about this is that you can use images and have a backfround or background colors. The down side is that it only works in Netscape 4 and blocking MSIE is almost impossible unless you design 2 seperate web pages. Anyways.... Copy this into your <head></head> tag. The number "100" is something you are going to have to play with. What this does is show the length of the layer when the mouse is over the origional layer. Increasing the number lengthens the layer to show more, and decreasing it shows less. <script> <!-- Hide from old browsers function layeron(){ document.layers['layer1'].clip.bottom = 100; } function layeroff(){ document.layers['layer1'].clip.bottom = 22; } // --> </script> This goes absolutely anywhere in your page. Putting it where you want it to appear won't do a thing. The numbers inside the tag determine where the layer goes. <LAYER NAME="layer1" LEFT=200 TOP=75 BGCOLOR=#C0C0C0 WIDTH=140 CLIP="-2,0,140,22" onMouseOver="layeron();" onMouseOut="layeroff();"> <b>YOUR TITLE</b><br> <font size=-1> <A HREF="YOUR LINK">YOUR LINK DESCRIPTION</A><br> <A HREF="YOUR LINK">YOUR LINK DESCRIPTION</A><br> <A HREF="YOUR LINK">YOUR LINK DESCRIPTION</A><br> <A HREF="YOUR LINK">YOUR LINK DESCRIPTION</A><br> </font> </LAYER> <br><br><br> "BGCOLOR" is the hexidecimal code for a color. It can be replaced with "BACKGROUND=YOUR IMAGE FILE" if you want the background as an image. "LEFT=200" is the position of the layer from the left side of the window. "TOP=75" is the position of the layer from the top of the document window. "WIDTH=140" is the width of the layer "CLIP" is the view of the layer initially. "-2,0,140,22" is a rectangle that shows the layer. The coordinates are from the top left to the bottom right. Leave the "-2" and the "0". Change the 140 to whatever the "WIDTH" is. The "22" can stay the same if you use bold normal text. Also, this 22 corisponds to the "22" in the top part of the script. And Finally, here is the script. <layer name="layer1" left=200 top=75 bgcolor=#c0c0c0 width=175 clip="-2,0,175,22" onmouseover="layeron();" onmouseout="layeroff();"> <img src="bookfolder.gif"><b>Doug's Links</b><br> <font size=-1> <img src="bookmark.gif" align=abscenter><a href="javascript.html">Javascript Made Easy!!</a><br> <img src="bookmark.gif" align=abscenter><a href="index.html">My Home Page</a><br> <img src="bookmark.gif" align=abscenter><a href="http://www.surfari.net/~dpopeney/count.htm">FREE COUNTERS</a><br> <img src="bookmark.gif" align=abscenter><a href="http://www.surfari.net/~dpopeney/tab.htm">Classic Rock Guitar Tab</a><br> </font> </layer> <br><br><br>