Example 3-1: view see code
Example 3-2: view see code
Example 3-3: view see code
Example 3-4: view see code
(31K)
Example 3-1
<html>
<head>
<title>rollover</title>
<script language="javascript">
function imageSwap(imageSource)
{
document.images['test'].src = "images/" + imageSource
}
</script>
</head>
<body bgcolor="#FFFFFF">
<a href="" onmouseover="javascript:imageSwap('rosehips.jpg');" onmouseout="javascript:imageSwap('heart.jpg');">
<img src="images/heart.jpg" name="test" width="171" height="222" border=0></a>
</body>
</html>
Example 3-2
<html>
<head>
<title>Shelley Biotechnologies</title>
<style type="text/css">
#header { position: absolute; left: 32; top: 20; }
#mainnav { position: absolute; left: 32; top: 82; }
#sidenav { position: absolute; left: 450; top: 120; }
#heart { position: absolute; left: 124; top: 204; }
#hearttext { position: absolute; left: 32; top: 149; }
#rosehips { position: absolute; left: 397; top: 213; }
#rosehipstext { position: absolute; left: 314; top: 149; z-index: 10; visibility: hidden; }
.sidenavtext { font-family: verdana, sans-serif; font-size: 10px; font-weight: normal; }
</style>
<script language="javascript">
browser = navigator.appName;
browserNum = parseInt(navigator.appVersion);
if ((browser == "Netscape") && (browserNum < 5))
{
// Netscape 4.x
layerRef = "document.layers['";
endLayerRef = "']";
styleRef = "";
}
else if ((browser == "Netscape") && (browserNum >= 5))
{
// Netscape 6
layerRef = "document.getElementById('";
styleRef = ".style";
endLayerRef = "')";
}
else
{
// Internet Explorer
layerRef = "document.all['";
endLayerRef = "']";
styleRef = ".style";
}
function showLayer(layerName)
{
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'");
}
</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">
</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="rosehipstext">
<img src="images/rose_text.gif" width="142" height="138">
</div>
<div id="rosehips">
<a href="javascript:showLayer('rosehipstext');"><img src="images/rosehips.jpg" width="200" height="224" border=0></a>
</div>
</body>
</html>
Example 3-3
<html>
<head>
<title>Shelley Biotechnologies</title>
<style type="text/css">
#header { position: absolute; left: 32; top: 20; }
#mainnav { position: absolute; left: 32; top: 82; }
#sidenav { position: absolute; left: 450; top: 120; }
#heart { position: absolute; left: 124; top: 204; }
#hearttext { position: absolute; left: 32; top: 149; }
#rosehips { position: absolute; left: 397; top: 213; }
#rosehipstext { position: absolute; left: 314; top: 149; }
#news
{
position: absolute;
left: 40;
top: 120;
z-index: 10;
visibility: hidden;
width: 150;
}
.sidenavtext { font-family: verdana, sans-serif; font-size: 10px; font-weight: normal; }
.link { font-family: verdana, sans-serif; font-size: 10px; }
.newscopy { font-family: verdana, sans-serif; font-size: 10px; font-weight: bold;}
</style>
<script language="javascript">
browser = navigator.appName;
browserNum = parseInt(navigator.appVersion);
if ((browser == "Netscape") && (browserNum < 5))
{
// Netscape 4.x
layerRef = "document.layers['";
endLayerRef = "']";
styleRef = "";
}
else if ((browser == "Netscape") && (browserNum >= 5))
{
// Netscape 6
layerRef = "document.getElementById('";
styleRef = ".style";
endLayerRef = "')";
}
else
{
// Internet Explorer
layerRef = "document.all['";
endLayerRef = "']";
styleRef = ".style";
}
function showLayer(layerName)
{
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'");
}
</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="about" >
<area shape="rect" coords="266,6,329,27" href="store" >
<area shape="rect" coords="166,5,252,27" href="research" >
<area shape="rect" coords="61,6,146,26" href="products" >
<area shape="rect" coords="0,7,45,26" href="javascript:showLayer('news');" >
</map>
</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">
<a href="news/0426" class="newscopy">April 26, 2001 - BioHomeLab 2.0 Released!</a><p>
<a href="news/0309" class="newscopy">March 9, 2001 - Irving Archbite named as CEO</a><p>
<a href="news/0301" class="newscopy">March 1, 2001 - Thornacycline Clinical Trials are Expanded</a><br>
</div>
</body>
</html>
Example 3-4
<html>
<head>
<title>Shelley Biotechnologies</title>
<style type="text/css">
#header { position: absolute; left: 32; top: 20; }
#mainnav { position: absolute; left: 32; top: 82; }
#sidenav { position: absolute; left: 450; top: 120; }
#heart { position: absolute; left: 124; top: 204; }
#hearttext { position: absolute; left: 32; top: 149; }
#rosehips { position: absolute; left: 397; top: 213; }
#rosehipstext { position: absolute; left: 314; top: 149; }
#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">
browser = navigator.appName;
browserNum = parseInt(navigator.appVersion);
if ((browser == "Netscape") && (browserNum < 5))
{
// Netscape 4.x
layerRef = "document.layers['";
endLayerRef = "']";
styleRef = "";
}
else if ((browser == "Netscape") && (browserNum >= 5))
{
// Netscape 6
layerRef = "document.getElementById('";
styleRef = ".style";
endLayerRef = "')";
}
else
{
// Internet Explorer
layerRef = "document.all['";
endLayerRef = "']";
styleRef = ".style";
}
// create way to remember which layer is visible
oldLayer = "none";
function showMenu(layerName)
{
// show the layer the user wants to see
eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'");
// hide other window
if (oldLayer != "none")
{
eval(layerRef + oldLayer + endLayerRef + styleRef + ".visibility = 'hidden'");
}
if (oldLayer == layerName)
{
oldLayer = "none";
}
else
{
oldLayer = layerName;
}
}
</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="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.
|
