Example 4-1: view see code
(28K)
Example 4-1
<html>
<head>
<title>Shelley Biotechnologies</title>
<style type="text/css">
#header { position: absolute; left: 32; top: 20; z-index: 20;}
#mainnav { position: absolute; left: 32; top: 82; z-index: 20;}
#whiteUnderHeader { position: absolute; left: 32; top: 0; z-index: 18;}
#sidenav { position: absolute; left: 450; top: 120; z-index: 0;}
#heart { position: absolute; left: 124; top: 204; z-index: 0;}
#hearttext { position: absolute; left: 32; top: 149; z-index: 0;}
#rosehips { position: absolute; left: 397; top: 213; z-index: 0;}
#rosehipstext { position: absolute; left: 314; top: 149; z-index: 0; }
#news
{
position: absolute;
left: 35;
top: 120;
z-index: 10;
visibility: hidden;
width: 200;
background-color: white;
border-width: 3;
border-color: #999999;
border-style: double;
padding: 20;
}
#products
{
position: absolute;
left: 100;
top: 120;
z-index: 10;
visibility: hidden;
width: 200;
background-color: white;
border-width: 3;
border-color: #999999;
border-style: double;
padding: 20;
}
#research
{
position: absolute;
left: 200;
top: 120;
z-index: 10;
visibility: hidden;
width: 200;
background-color: white;
border-width: 3;
border-color: #999999;
border-style: double;
padding: 20;
}
#store
{
position: absolute;
left: 300;
top: 120;
z-index: 10;
visibility: hidden;
width: 350;
background-color: white;
border-width: 3;
border-color: #999999;
border-style: double;
padding: 20;
}
#about
{
position: absolute;
left: 400;
top: 120;
z-index: 10;
visibility: hidden;
width: 200;
background-color: white;
border-width: 3;
border-color: #999999;
border-style: double;
padding: 20;
}
.sidenavtext { font-family: verdana, sans-serif; font-size: 10px; font-weight: normal; }
.link { font-family: verdana, sans-serif; font-size: 10px; }
.boldlink { font-family: verdana, sans-serif; font-size: 10px; font-weight: bold;}
.secHeader { font-family: verdana, sans-serif; font-size: 20px; font-weight: normal; color: #999999;}
</style>
<script language="javascript">
// set global browser identification variables
browser = navigator.appName;
browserNum = parseInt(navigator.appVersion);
N4 = false;
N6 = false;
IE = false;
if ((browser == "Netscape") && (browserNum < 5))
{
// Netscape 4.x
layerRef = "document.layers['";
endLayerRef = "']";
styleRef = "";
N4 = true;
}
else if ((browser == "Netscape") && (browserNum >= 5))
{
// Netscape 6
layerRef = "document.getElementById('";
styleRef = ".style";
endLayerRef = "')";
N6 = true;
}
else
{
// Internet Explorer
layerRef = "document.all['";
endLayerRef = "']";
styleRef = ".style";
IE = true;
}
// create way to remember which layer is visible
oldLayer = "none";
// set animation variables
initialTop = 120;
newTop = initialTop;
function showMenu(layerName)
{
// show the layer the user wants to see
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'");
// move other window
if (oldLayer != "none")
{
// alter z-indices of layers to place
// the new menu above older menu
eval(layerRef + layerName + endLayerRef + styleRef + ".zIndex = 11");
eval(layerRef + oldLayer + endLayerRef + styleRef + ".zIndex = 10");
// slide the old menu layer up and out of sight
slideMenu(oldLayer);
}
// update which window is currently visible
if (oldLayer == layerName)
{
oldLayer = "none";
}
else
{
oldLayer = layerName;
}
}
function slideMenu(layerName)
{
// find layer height
if(N4)
{
height = eval(layerRef + layerName + endLayerRef + ".clip.height");
}
else
{
height = eval(layerRef + layerName + endLayerRef + ".offsetHeight");
}
// animate the layer upwards
moveLayer(layerName,height);
return;
}
function moveLayer(layerName,height)
{
// newTop and initialTop are global variables, set earlier
endTop = initialTop - height;
newHeight = height - newTop;
if(newTop > endTop)
{
// move layer again
newTop = newTop - 20;
eval(layerRef + layerName + endLayerRef + styleRef + ".top = " + newTop);
//eval(layerRef + layerName + endLayerRef + ".offsetHeight = " + newHeight);
}
else
{
// hide the old menu and reset its position
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'hidden'");
eval(layerRef + layerName + endLayerRef + styleRef + ".top = " + initialTop);
// reset global variable in preparation for the next menu
newTop = initialTop;
return;
}
// wait a bit, then call this function again
setTimeout("moveLayer('" + layerName + "'," + height + ")",1);
}
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="header">
<img src="images/shelley.gif" alt="Shelley Biotechnologies" width="395" height="49">
</div>
<div id="mainnav">
<img src="images/main_nav.gif" width="564" height="32" usemap="#mainnavmap" border=0>
<map name="mainnavmap">
<area shape="rect" coords="344,6,421,28" href="javascript:showMenu('about');">
<area shape="rect" coords="266,6,329,27" href="javascript:showMenu('store');">
<area shape="rect" coords="166,5,252,27" href="javascript:showMenu('research');">
<area shape="rect" coords="61,6,146,26" href="javascript:showMenu('products');">
<area shape="rect" coords="0,7,45,26" href="javascript:showMenu('news');">
</map>
</div>
<div id="whiteUnderHeader">
<img src="images/white_dot.gif" width="800" height="114">
</div>
<div id="sidenav" class="sidenavtext">
Home Search Contact
</div>
<div id="hearttext">
<img src="images/heart_text.gif" width="97" height="139">
</div>
<div id="heart">
<img src="images/heart.jpg" width="171" height="222">
</div>
<div id="rosehips">
<img src="images/rosehips.jpg" width="200" height="224" border=0>
</div>
<div id="rosehipstext">
<img src="images/rose_text.gif" width="142" height="138">
</div>
<div id="news">
<span class="secHeader">News</span><p>
<a href="news/0426" class="boldlink">April 26, 2001 - BioHomeLab 2.0 Released!</a><p>
<a href="news/0309" class="boldlink">March 9, 2001 - Irving Archbite named as CEO</a><p>
<a href="news/0301" class="boldlink">March 1, 2001 - Thornacycline Clinical Trials are Expanded</a><br>
</div>
<div id="products">
<span class="secHeader">Products</span><p>
<a href="news/0426" class="boldlink">BioHomeLab 2.0</a><p>
<a href="news/0309" class="boldlink">Focusyn</a><p>
<a href="news/0301" class="boldlink">ProZap</a><p>
<a href="news/0426" class="boldlink">Inhalozyme</a><p>
<a href="news/0309" class="boldlink">Thornacohol</a><p>
<a href="news/0301" class="boldlink">Sinoplug</a><p>
</div>
<div id="research">
<span class="secHeader">Research</span><p>
<a href="research/insulin" class="boldlink">Finding a way to allow diabetics to take insulin orally</a>
<p>
<a href="research/malebirth" class="boldlink">Male birth control pill</a>
<p>
<a href="research/bcancer" class="boldlink">Ongoing breast cancer research</a>
<p>
<a href="research/aids" class="boldlink">Ongoing AIDS research</a>
</div>
<div id="store">
<span class="secHeader">Shelley Store</span><p>
<span class="sidenavtext">
Our BioHomeLab is now available online!<br>
<a href="store/hbl" class="boldlink">Get yours today!</a></span>
<p>
<a href="store/hats" class="boldlink">Shelley hats</a><p>
<span class="sidenavtext">Shelley shirts </a>
<ul>
<li><a href="store/shirts/selfish.html" class="link">"My gene is more selfish than your gene"</a>
<li><a href="store/shirts/sucks.html" class="link">"Your genome sucks"</a>
<li><a href="store/shirts/vegas.html" class="link">"My mom went to Las Vegas and all I got was this lousy genome"</a>
<li><a href="store/shirts/science.html" class="link">"Science!"</a>
<li><a href="store/shirts/blind.html" class="link">"I'm about to blind you with science, baby."</a>
</ul>
</div>
<div id="about">
<span class="secHeader">About Shelley</span><p>
<a href="about/history" class="boldlink">History</a><p>
<a href="about/philosophy" class="boldlink">Philosophy</a><p>
<a href="about/giving" class="boldlink">Giving Back</a><p>
<a href="about/leadership" class="boldlink">Leadership</a><p>
<a href="about/jobs" class="boldlink">Careers</a>
</div>
</body>
</html>
Based on reader feedback from the first edition of this book, it has become clear that a few things mentioned in the book need to be brought clearly to light.
|
