Lions!
Carter Snowden's page which provides some examples of:
| Lions | Tigers | Bears | Source |
(note that using your browser's "View Source" button will bring up a different
view that what is listed below, since the server-side include directives will
have been processed -- the include files will have been, well, included, and
the date will have been interpreted. The "real" code for the page appears below.).
Note that the file you are looking at is named "index.shtml" -- with the
".shtml" extension rather than the more familiar ".html". In the web.mit.edu
environment, this extension is necessary in order to tell the server that the
page has ssi directives that need to be processed.
<html><head><title>example</title></head>
<style>
body { font-family: Arial, Helvetica, sans-serif;
margin-left: 15;
}
h1 {font-family: Arial, Helvetica, sans-serif;
font-size: 100pt;
color: #6677bb
}
h2 {font-family: Arial, Helvetica, sans-serif;
font-size: 40pt;
color: #6677bb
}
</style>
<script language="JavaScript">
var thedivs = new Array(3)
thedivs[0] = "one"
thedivs[1] = "two"
thedivs[2] = "three"
thedivs[3] = "four"
function hideShow(showthis) {
//hides all the divs on the page, then
//shows the one requested
for (var i = 0; i < thedivs.length; i++) {
thisdiv = document.getElementById(thedivs[i])
thisdiv.style.visibility = "hidden"
}
showdiv = document.getElementById(showthis)
showdiv.style.visibility="visible"
}
</script>
<body bgcolor="ddffdd">
<!--#config timefmt="%H:%M $tflag on %m %d %y" -->
<p>
It's now: <!--#echo var="DATE_LOCAL" -->
<br><br>
<!--#include file="17s21include" -->
<!-- note - "17s21include" is a file, in the same directory, that contains the snippet of html code that generates the four clickable menu items at the top of the page -->
<div id="one" style="visibility: visible; position: absolute">
<h1>Lions!</h1>
</div>
<div id="two" style="visibility: hidden; position: absolute">
<h1>Tigers!</h1>
</div>
<div id="three" style="visibility: hidden; position: absolute">
<h1>Bears!</h1>
</div>
<div id="four" style="visibility: hidden; position: absolute">
<h2>The code for this page:</h2>
<pre>
<!--#include file="source_include" -->
</pre>
</div>
</body></html>