<HTML> ... <STYLE TYPE="text/css"> ... #search { z-index: 5; position: absolute; top: 200px; left:200px; visibility: hidden; } </STYLE> <SCRIPT LANGUAGE="javascript"> function showLayer(layerName) { document.layers[layerName].visibility = 'visible' } function hideLayer(layerName) { document.layers[layerName].visibility = 'hidden' } </SCRIPT> ... <DIV ID="search"> <FORM ACTION="cgi-bin/search.pl" METHOD="post"> <IMG SRC="images/search_hd.gif" ALT="Search" WIDTH="82" HEIGHT="15" BORDER="0"> <P> <TABLE><TR><TD VALIGN="middle"> <INPUT TYPE="text" SIZE=30 NAME="searchString"></TD> <TD VALIGN="middle"><INPUT TYPE="image" SRC="images/search_go.gif" BORDER="0"> </TD></TR></TABLE> </FORM> <P> <A HREF="javascript:hideLayer('search')"> Close this window</A> </DIV>
Now here's some code that doesn't let the background shine through.
<DIV ID="search"> <TABLE BGCOLOR="#FFFFFF" CELLPADDING="10"><TR><TD> <FORM ACTION="cgi-bin/search.pl" METHOD="post"> <IMG SRC="images/search_hd.gif" ALT="Search" WIDTH="82" HEIGHT="15" BORDER="0"> <P> <TABLE><TR><TD VALIGN="middle"> <INPUT TYPE="text" SIZE=30 NAME="searchString"></TD> <TD VALIGN="middle"><INPUT TYPE="image" SRC="images/search_go.gif" BORDER="0"> </TD></TR></TABLE> </FORM> <P> <A HREF="javascript:hideLayer('search')"> Close this window</A> </TD></TR></TABLE> </DIV>
Let's add a border to the search window to separate it from the background a little bit better.
#search { z-index: 5; position: absolute; top: 200px; left:200px; visibility: hidden; border-style: double; }
Since this fictional Shelley site is enormous, we're adding secondary navigation to the home page.
<STYLE TYPE="text/css"> ... #productsNav {...} #trainingNav {...} #servicesNav {...} #commongoodNav {...} #newsNav {...} </STYLE> <SCRIPT LANGUAGE="javascript"> function showLayer(layerName) { document.layers[layerName].visibility = 'visible' } function hideLayer(layerName) { document.layers[layerName].visibility = 'hidden' } </SCRIPT> ... <DIV ID="mainNavigation"> <IMG SRC=" /main_nav.gif" ALT="Main Navigation" WIDTH="561" HEIGHT="42" BORDER="0" USEMAP="#mainnav"> <MAP NAME="mainnav"> <AREA ... HREF="javascript:showLayer('productsNav')"> ... </MAP> </DIV> <DIV ID="productsNav"> <TABLE BGCOLOR="#FFFFFF" CELLPADDING=10><TR><TD> <H3>Products</H3> <A HREF="products/portable/">Portable BioLab</A><BR> <A HREF="products/accessories/">Portable BioLab Accessories</A><BR> <A HREF="products/education/">Educational Products</A> <BR> <A HREF="products/corporate/">Corporate BioLabs</A><BR> <A HREF="products/enterprise/">Enterprise BioLabs</A> <P> <A HREF="store/">How to order</A> </P> <P> <A HREF="javascript:hideLayer('productsNav')">Close this window</A> </P> </TD></TR></TABLE> </DIV> <DIV ID="trainingNav"> <TABLE BGCOLOR="#FFFFFF" CELLPADDING=10><TR><TD> <H3>Training</H3> <A HREF="training/begin/">Genetic Engineering for Beginners</A><BR> <A HREF="training/intermediate/">Intermediate Genetic Engineering</A><BR> <A HREF="training/advanced/">Advanced Genetic Engineering</A><BR> <A HREF="training/prof/">Professor Track Biogenesis</A> <BR> <A HREF="training/rdna/">rDNA Refresher Courses</A> <P> <A HREF="training/schedule.html">Build your training schedule</A> </P> <P> <A HREF="javascript:hideLayer('trainingNav')">Close this window</A> </P> </TD></TR></TABLE> </DIV>
Here's some script to hide the old layers we don't need.
<SCRIPT LANGUAGE="javascript"> oldLayer = "" function showNav(layerName) { //hide the old layer if (oldLayer) { // we need to make sure it's not // the visitor's 1st click document.layers[oldLayer].visibility = 'hidden' } //make the correct layer visible document.layers[layerName].visibility = 'visible' oldLayer = layerName }
Since this fictional Shelley site is enormous, we're adding secondary navigation to the home page.
<SCRIPT LANGUAGE="javascript"> ... currentFeature = "1" function featureTeaser() { if ( currentFeature == "1" ) { document.layers['feature'].images['teaser1'].src = 'images/home/teaser2.gif' currentFeature = "2" } else if (currentFeature = "2") { document.layers['feature'].images['teaser1'].src = 'images/home/teaser3.gif' currentFeature = "3" } else { location.href = "feature.html" } } ... <DIV ID="feature"> <IMG SRC="images/home/feature.gif" ALT="Shelley Biotechnologies, Inc." BORDER="0" USEMAP="#feature"> <MAP NAME="feature"> <AREA SHAPE="rect" COORDS="500,300,582,323" HREF="javascript:featureTeaser()"> </MAP> </DIV>