<HTML>
<HEAD>
<TITLE>line</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>
<!-- JavaScript layer generation concept by Andrew Starling, originally displayed on www.foxglove.co.uk -->
<script language="JavaScript">
<!--
function genlayer() {
for (var k = 0; k < 100; k=(k+1)) {
document.write ('<div id="Layer')
document.write (k)
document.write ('" style="position:absolute; left:');
if (k == 0) {
document.write ('70')
document.write ('px; top:')
document.write ('5')
document.write ('px; width:470px; height:62px; z-index:')
document.write (k)
document.writeln ('"><!--#include virtual="/internet.com advert code goes here"--></div>')
}
else {
document.write (301+100*Math.cos(k))
document.write ('px; top:')
document.write (174+100*Math.cos(k))
document.write ('px; width:60px; height:69px; z-index:')
document.write (k)
document.writeln ('"><img src="images/glove3.GIF" width="60" height="69"></div>')
}
}
}
//-->
</script>
<BODY BGCOLOR="#FFFFFF" onLoad="timerID=setTimeout('genlayer()',1000)">
</BODY>
</HTML>
The top section of code between "if" and "else" is just there to show an advert. Yes, unbelievably, we've managed to squeeze a Server Side Include advert into the page. You'll need to change or remove this section if you want to adapt the code for your own use.
The bit after "else" does the important work of writing 100 DHTML layers in the following format, each containing the same graphic.
<div id="Layer1" style="position:absolute; left:301px; top:174px; width:60px; height:69px; z-index:1"><img src="images/glove3.GIF" width="60" height="69"></div>
For each layer, the position and z-index (precedence of layers where they clash) changes according to the value of k.
It's not going to win a prize for slick JavaScript, but it's fun and it works.
When the file is loaded, the creation of layers begins. A strange thing now happens. Both Explorer and Navigator find it difficult to cope with the generation of layers from within the document, so they automatically launch a new page to show the result. This page doesn't have <head> or <body> tags, it's just the layers on their own. Really it's not a valid HTML page, but the browsers generously do their best to display it anyway.
For some of the bigger examples with more layers, the generated page is enormous and contains thousands of lines.
The fact that the browsers launch a new page is quite a complication. It means nothing can be included on the page unless it comes from a JavaScript Write.
It also means that the Back button can be dangerous, which is why the examples launch into a skeleton window where the Back button doesn't appear. If the Back button is pressed at the wrong moment, for example before all the layers have been created, it can easily crash the browser.
You are very welcome to take this code and adapt it for your own use. If you finish up with a brilliant example, tell us about it and we'll mount it alongside our own humble efforts.
Finally, here's the code for the most complicated example, the flower. Note that it doesn't seem to make much difference where the JavaScript is on the page, inside the Head, the Body, or between the two. And between the two is the most unusual, so that's where we've put it.
<HTML>
<HEAD>
<TITLE>three colour bloom</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>
<!--
JavaScript layer generation concept by Andrew Starling, originally shown at www.foxglove.co.uk -->
<script language="JavaScript">
<!--
function genlayer() {
for (var k = 0; k < 300; k=(k+1)) {
document.write ('<div id="Layer')
document.write (k)
document.write ('" style="position:absolute; left:');
if (k == 0) {
document.write ('70')
document.write ('px; top:')
document.write ('5')
document.write ('px; width:470px; height:72px; z-index:')
document.write (k)
document.writeln ('"><!--#include virtual="internet.com advert code goes here"--></div>')
}
else {
if (k<190) {
document.write (301+5*(Math.sin(k)*(k%30)))
document.write ('px; top:')
document.write (200+5*(Math.cos(k)*(k%30)))
document.write ('px; width:50px; height:50px; z-index:')
document.write (k)
document.writeln ('"><img src="images/red.GIF" width="50" height="50"></div>')
}
else {
if (k<270) {
document.write (301+(Math.sin(k)*(k%70)))
document.write ('px; top:')
document.write (200+(Math.cos(k)*(k%70)))
document.write ('px; width:50px; height:50px; z-index:')
document.write (k)
document.writeln ('"><img src="images/blue.GIF" width="50" height="50"></div>')
}
else {
document.write (301+(Math.sin(k)*(k%25)))
document.write ('px; top:')
document.write (200+(Math.cos(k)*(k%25)))
document.write ('px; width:50px; height:50px; z-index:')
document.write (k)
document.writeln ('"><img src="images/yellow.GIF" width="50" height="50"></div>')
}
}
}
}
}
//-->
</script>
<BODY BGCOLOR="#000033" onLoad="timerID=setTimeout('genlayer()',1000)">
</BODY>
</HTML>
Back to the examples page.
