dHtml JavaScript: Colour Ascii-Animation

Valid HTML 4.01!
Valid CSS!

0( ( |||------||| 

       ,---------.
      /  _     _  \ 
      \ |@| | |@| /
       \    |    /
        \  _|_  /
   _     \     /     _
  {_:._   `---'   _.:_}
       '-._   _.-'
          _:+:_                    ,.
   _  _.-'     '-._  _             `'
  {_:'             ':_}
1 ) ) \/\/\/\/\/\/ 





       _
      {_}
        '.            _
          '.     _,.-:_}           __
  _    _,.-:+:-'`                 /  \
 {_:-'`      '.                   \__/
               '._
                {_}
2( ( ---||||||--- 






              
            .
 _          :          _
{_:--------:+:--------:_}
            :
            :
           {_}
3 ) ) /\/\/\/\/\/\ 





                 _
                {_}
  _            .'
 {_:-.,_     .'
        `'-:+:-.,_    _
          .'      `'-:_}
       _.'                
      {_}

-=[ Method 5 ]=-

-=[ Version 1.2a ]=-

An attempt to document
this Animation Script.
 It all started one rainy day ...

This document is one entire sheet.
it is split into three parts :
o - a demonstration animation
o - a vague description
o - and the page's source code
 

This script uses StyleSheet properties
to simulate some of Netscape-4's LAYER
tag properties. It has been found to
work on most Mozilla-4 browsers:
Netscape-4, Iexplorer-4 and up.

It operates as a basic stop-motion film.
In other words, it is a flip-book.
Each picture is slightly different and
when shown in sequence very fast it
gives the illusion of movement.
creation of this type of animation page requires
(at the moment) some knowledge of HTML and CSS
and the ability to use a text-editor. 
the component parts are in three basic units:
<HTML>
<HEAD>
    <STYLE>  - font type & color definitions
    <SCRIPT> - animation runtime module
</HEAD>
<BODY>
    <DIV><PRE> - the picture enclosures
</BODY>
</HTML>
the first two are contained in the <HEAD> block and
the pictures  are contained in the <BODY> section
of the page.
some early Mozilla-4 browsers don't like
style properties in html tags even though
the HTML4 specification describes this usage,
therefor all style properties are defined in the
<HEAD> section so that they are pre-defined
before being rendered by the <BODY> section. 
this particular instance uses this CSS/HTML
form of colorization:-
eg:
<html>
<head>
<style type="text/css">
    #g { color: green }
</style>
</head>
<body>
<span id="g"> text </span>
</body>
</html>
the <SCRIPT> section is in two parts:
(1) some settings you may wish to change
(2) the run-time module 
the position settings 'top' and 'left' in this case are
specified in '%' percentage units but could also be
specified in 'px' pixel units
the run-time module is auto configuring
and it can be used as it is
and altho' there is a small duplication
of code it seems to run faster that way

it uses the visibility property of
the CSS for the DIV ID blocks,
making one picture visible at a time,
in sequence.

the pictures :
  each picture has the same number of lines (but is not necessary)
  each picture is enclosed by DIV and PRE tags
  each picture has a sequential DIV ID  eg:   "t1" to "t"+(n_max)
  (n_max) = the last picture id number

caveat:-
-=-=-=-=-
ETAGO == '</'
if the artwork has the char combination </ without being
immediately followed by a valid html tag the browser will
ignore everything following until a valid html tag is found.
the easiest workaround is to replace the  </  with  &lt;/
or to 'escape' the foreslash with a backslash eg:  <\/

The Source Code for this page: 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>-=oO[ Method 5 ]Oo=-
</title>
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
<!-- Method 5  version 1.2a 25-04-2001 -->
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->


<!-- set the animation font type and colour
 -->
<STYLE  TYPE="text/css">
<!--
 BODY { background-color:#000; color:#00c0ff }
 PRE  { font-family:fixed,fixedsys,monaco,monospace; color:#ff9090 }
 #r { color:red }
 #g { color:green }
 #b { color:blue }

/*  how to make color values:-
 *  1. these values are in HEX number format
 *     00 = DARK  (0)
 *     FF = LIGHT (255)
 *  2. they are composed of three numbers
 *     representing RED, GREEN and BLUE as
 *     #rrggbb
 */
 /*** page heading decor ***/
 #c1{ color:#0080ff }
 #c2{ color:#00fffF }
 #c3{ color:#ffff00 }
 #c4{ color:#00ff00 }
 #c5{ color:#c0c0c0 }
 #c6{ color:#ff00ff }
 #c7{ color:#808040 }
 -->
</STYLE>



<SCRIPT type="text/javascript"><!--// Method-5 animation script (compressed)

/* **** user defined animation settings **** */

var     max_pics=4;   // <---- set this value to the total number of pictures in film
var     top='15%';    // <---- set this value to position animation top
var     left='33%';   // <---- set this value to position animation left
var     delay=45;     // <---- set this default delay after each picture
var     wait=false;   // <---- set this to pause after each loop (true/false)
var     name='t';     // <---- set this to the animation's DIV ID prefix



/* **** animation runtime module **** *//* speed optim *//* Method-5 v1.2a */
var dhtml=true;
var posi=0,prev=1,run=true;
with(document){ write('<'+'style type="text/css">');
for(i=0;i<=max_pics;i++)
  write("#"+name+i+"{position:absolute;left:"+left+";top:"+top+";z-index:"+i+";visibility:hidden}");
write("#logo {position:absolute;left:"+left+";top:"+top+";z-index:999;visibility:visible}");
write("<\/style>");}
if(document.layers) var doc='document.',vis='.visibility';
else if(document.all) var doc='document.all.',vis='.style.visibility';
else if(document.getElementById) var doc='document.getElementById(\"',vis='\").style.visibility';
else dhtml=false;
function tick(){
 if(++posi>max_pics) posi=1;
 eval(doc+'t'+prev+vis+'="hidden"');
 eval(doc+'t'+posi+vis+'="visible"');
 prev=posi;
 if(run){
  if(wait){
   if(posi==max_pics||posi==1){
    setTimeout("tick()",delay*5)
   }
   else setTimeout("tick()",delay)
  }
  else setTimeout("tick()",delay)
 }
}
//--></SCRIPT>
</HEAD>


<BODY   bgColor="#000000" text="#00c0ff" onload="tick();">
<noscript>
 <h2> Please ENABLE JavaScript to View this Page </h2>
 <h2> Please ENABLE StyleSheet to View this Page </h2>
</noscript>
<script type="text/javascript"><!--//
if(dhtml==false) document.write("<"+"h2>This animation requires a Mozilla-4 Browser minimum!<\/h2>");
//--></script>


<center><h2>
<b id="c1"> dHtml JavaScript: 
<b id="c2"> C </b>
<b id="c3"> o </b>
<b id="c4"> l </b>
<b id="c5"> o </b>
<b id="c6"> u </b>
<b id="c7"> r </b>
<b id="c1"> Ascii-Animation</b>
</h2></center>




<!-- optional foreground decor -->
<!-- non-moving parts can be placed here -->

<div id="logo">_<pre><span id="r"> 
       ,---------.
      /  _     _  \
      \ |_| | |_| /
       \    |    /
        \  _|_  /
         \     /
          `---'
 </span>
</pre></div>




<!-- frames/layers/pictures -->
<!-- each picture has the same number of lines but doesn't need to have -->
<!-- each frame is enclosed by DIV and PRE tags -->
<!-- each frame has a sequential DIV ID --><!-- eg:   "t1" to "t"+(n_max) -->
<!-- (n_max) = the last picture id number -->

<!-- these pictures were created by Colin Randall -->

<div id="t1">
0( ( |||------|||
<pre>

       ,---------.
      /  _     _  \<span id="b">
      \ |@| | |@| /</span>
       \    |    /
        \  _|_  /
   _     \     /     _
  {_:._   `---'   _.:_}
       '-._   _.-'
          _:+:_
   _  _.-'     '-._  _
  {_:'             ':_}

</pre>
</div>

<div id="t2">
1 ) ) \/\/\/\/\/\/
<pre>





       _
      {_}
        '.            _
          '.     _,.-:_}
  _    _,.-:+:-'`
 {_:-'`      '.
               '._
                {_}
</pre></div>

<div id="t3">
2( ( ---||||||---
<pre>






              
            .
 _          :          _
{_:--------:+:--------:_}
            :
            :
           {_}
</pre></div>


<div id="t4">
3 ) )/\/\/\/\/\/\
<pre>





                 _
                {_}
  _            .'
 {_:-.,_     .'
        `'-:+:-.,_    _
          .'      `'-:_}
       _.'                
      {_}
</pre>
</div>

</BODY>
</html>



  /\-/\
 ( a a(
  \___")
Valid HTML 4.01! Made with CSS Method-5 : Copyrites © 1998-2002
CJRandall , MBarendsz , MSchmitz
Last Revised : March 23rd, 2002
www.shieldwolf.demon.co.uk