<!-- 
document.writeln('<table border="0" cellpadding="2" bgcolor="#FFFFFF">');
document.writeln('  <tr>');
document.writeln('    <td><img border="0" align="Left" src="http://www.web-source.net/graphics/wbontrager.jpg"');
document.writeln('	  height=105 width=80 /><font face="Arial,Verdana,Helvetica" size="+1"><b>Dynamic');
document.writeln('      HTML Quick \'n Easy Layers</b><br />');
document.writeln('      <br />');
document.writeln('      </font><font face="Verdana,Helvetica" size="2">By');
document.writeln('      <a href="http://www.web-source.net/cgi-bin/web/jump.cgi?ID=762" target="blank">William');
document.writeln('      Bontrager</a><br />');
document.writeln('      <br />');
document.writeln('      If you\'ve heard of dynamic HTML and layers and wanted to see what you can');
document.writeln('      do with it, but the information you got was too much and too fast for');
document.writeln('      understanding, this article is for you. <br />');
document.writeln('      <br />');
document.writeln('      Here you will find a few pieces of information, enough to get you started.');
document.writeln('      When you use what\'s presented here with confidence, you then have a foundation');
document.writeln('      against which additional information can make more sense. <br />');
document.writeln('      <br />');
document.writeln('      A layer is content in a DIV tag with an ID. Example: <br />');
document.writeln('      <br />');
document.writeln('      &lt;div id="myLayer"&gt;<br />');
document.writeln('      Content here.<br />');
document.writeln('      &lt;/div&gt;<br />');
document.writeln('      <br />');
document.writeln('      The ID attribute allows JavaScript to modify the position, color, visibility,');
document.writeln('      and other attributes of the layer. <br />');
document.writeln('      <br />');
document.writeln('      Layers are HTML. When JavaScript is used to modify a layer, the layer is');
document.writeln('      dynamic. Thus, "Dynamic HTML." <br />');
document.writeln('      <br />');
document.writeln('      You\'ve already seen how to create a layer. It can contain text, images, anything');
document.writeln('      that a normal web page can have, including more layers. <br />');
document.writeln('      <br />');
document.writeln('      Next, I show you how to position the layer in the exact place you want it');
document.writeln('      on the web page. <br />');
document.writeln('      <br />');
document.writeln('      Then, I\'ll show you how to use JavaScript to hide the layer, rendering the');
document.writeln('      layer\'s content invisible, and how to make it visible again. <br />');
document.writeln('      <br />');
document.writeln('      <b>Positioning a Layer </b><br />');
document.writeln('      <br />');
document.writeln('      If you want the layer to be displayed on the page where it naturally would');
document.writeln('      be displayed when the browser renders your web page from top to bottom, you');
document.writeln('      can skip this section. <br />');
document.writeln('      <br />');
document.writeln('      But if you want to display the layer in a specific spot on your web page,');
document.writeln('      read on. <br />');
document.writeln('      <br />');
document.writeln('      In the DIV tag, specify a style with "position", "top", and "left" values.');
document.writeln('      Example: <br />');
document.writeln('      <br />');
document.writeln('      &lt;div <br />');
document.writeln('      &nbsp; &nbsp; id="myLayer"<br />');
document.writeln('      &nbsp; &nbsp; style=" <br />');
document.writeln('      &nbsp; &nbsp; &nbsp; &nbsp; position: absolute; <br />');
document.writeln('      &nbsp; &nbsp; &nbsp; &nbsp; top: 10; <br />');
document.writeln('      &nbsp; &nbsp; &nbsp; &nbsp; left: 200;"&gt;<br />');
document.writeln('      Content here.<br />');
document.writeln('      &lt;/div&gt;<br />');
document.writeln('      <br />');
document.writeln('      The style in the above DIV tag causes the layer to be positioned absolute');
document.writeln('      (there are other positions, such as "relative," that we won\'t address in');
document.writeln('      this article) so the top of the layer is 10 pixels from the top of the browser');
document.writeln('      window and the left edge of the layer is 200 pixels from the left edge of');
document.writeln('      the browser window. <br />');
document.writeln('      <br />');
document.writeln('      It\'s simple, really. Specify an absolute position for the layer with the');
document.writeln('      number of pixels down from the top and the number of pixels in from the left.');
document.writeln('      <br />');
document.writeln('      <br />');
document.writeln('      No matter where the other text of the web page is displayed, the content');
document.writeln('      of the layer will be displayed in the position you specify. <br />');
document.writeln('      <br />');
document.writeln('      The layer\'s style can optionally define other attributes, including such');
document.writeln('      things as text color, text size, the layer\'s size, border color and size,');
document.writeln('      background color, and in what order this layer\'s content shall be printed');
document.writeln('      when more than one layer is in the same spot. <br />');
document.writeln('      <br />');
document.writeln('      The page at');
document.writeln('      <a href="http://willmaster.com/possibilities/demo/DynamicHTML.EasyLayers/?wsnet"');
document.writeln('	  target="blank">http://willmaster.com/a/26h/pl.pl?art266</a> demonstrates');
document.writeln('      some of those attributes. <br />');
document.writeln('      <br />');
document.writeln('      <b>Hiding Layers and Making Them Visible Again </b><br />');
document.writeln('      <br />');
document.writeln('      Hiding layers and making them visible requires the use of JavaScript. The');
document.writeln('      JavaScript simply changes an attribute in the layer\'s style so it\'s either');
document.writeln('      "hidden" or "visible". When the attribute is "hidden" the layer disappears.');
document.writeln('      When it\'s "visible" the layer is printed. <br />');
document.writeln('      <br />');
document.writeln('      The JavaScript code is very simple, or it would be if there was only one');
document.writeln('      browser. But there are three different methods that browsers can use to change');
document.writeln('      attributes of layers. <br />');
document.writeln('      <br />');
document.writeln('      Netscape had layers first. Then Microsoft developed their own layers, which');
document.writeln('      was different than Netscape\'s. Finally, the W3C developed guidelines to');
document.writeln('      standardize the thing, which was different than the previous two developments.');
document.writeln('      <br />');
document.writeln('      <br />');
document.writeln('      So the JavaScript code has to test the browser to see which layers method');
document.writeln('      the browser uses. Only then can it change the layer\'s attributes. The');
document.writeln('      demonstration download page at');
document.writeln('      <a href="http://willmaster.com/possibilities/demo/DynamicHTML.EasyLayers/?wsnet"');
document.writeln('	  target="blank">http://willmaster.com/a/26h/pl.pl?art266</a> does that. <br />');
document.writeln('      <br />');
document.writeln('      In the demonstration, three methods are presented to tell the JavaScript');
document.writeln('      to hide the layer and to make it visible again. </font><br />');
document.writeln('      <ol>');
document.writeln('	<li>');
document.writeln('	  <font face="Verdana,Helvetica" size="2">A SPAN tag with an onclick attribute.');
document.writeln('	  Example of the hiding method: <br />');
document.writeln('	  <br />');
document.writeln('	  &lt;span onclick="javascript:MakeHidden()"&gt;Hide it&lt;/span&gt;<br />');
document.writeln('	  When the cursor clicks on the spanned text, the layer disappears. </font><br />');
document.writeln('	  <br />');
document.writeln('	</li><li>');
document.writeln('	  <font face="Verdana,Helvetica" size="2">A SPAN tag with an onmouseover attribute.');
document.writeln('	  Example of the hiding method: <br />');
document.writeln('	  <br />');
document.writeln('	  &lt;span onmouseover="javascript:MakeHidden()"&gt;Hide');
document.writeln('	  it&lt;/span&gt;<br />');
document.writeln('	  When the cursor moves over the spanned text, the layer disappears.');
document.writeln('	  </font><br />');
document.writeln('	  <br />');
document.writeln('	</li><li>');
document.writeln('	  <font face="Verdana,Helvetica" size="2">A link with an onmouseover attribute.');
document.writeln('	  Example of the hiding method: <br />');
document.writeln('	  <br />');
document.writeln('	  &lt;a href="#" onmouseover="javascript:MakeHidden()"&gt;Hide');
document.writeln('	  it&lt;/a&gt;<br />');
document.writeln('	  When the cursor moves over the link text, the layer disappears. </font>');
document.writeln('      </li></ol>');
document.writeln('      <p>');
document.writeln('      <font face="Verdana,Helvetica" size="2">Those and other methods can be used.');
document.writeln('      (Note: Netscape 4 will work only with links, not with SPAN or other HTML');
document.writeln('      tags.) <br />');
document.writeln('      <br />');
document.writeln('      When the cursor hovers over a link, its shape changes (for most browsers).');
document.writeln('      When moving over spanned text, it doesn\'t. Whether or not you want the cursor');
document.writeln('      to change when it hovers over the hidden/visible text would be a consideration');
document.writeln('      when determining which method to use. <br />');
document.writeln('      <br />');
document.writeln('      Now you can do layers :)<br />');
document.writeln('      <br />');
document.writeln('      Will Bontrager <br />');
document.writeln('      <br />');
document.writeln('      Copyright &copy; Bontrager Connection, LLC <br />');
document.writeln('      <br />');
document.writeln('      <b>About the Author:</b><br />');
document.writeln('      <br />');
document.writeln('      </font>');
document.writeln('      </p><table border="0" cellspacing="0" cellpadding="0" width="100%">');
document.writeln('	<tr>');
document.writeln('	  <td bgcolor="#EAE8E8"><font face="Verdana,Helvetica" size="2">William Bontrager');
document.writeln('	    Programmer/Publisher,');
document.writeln('	    "<a href="http://willmaster.com/possibilities/?wsnet" target="blank">WillMaster');
document.writeln('	    Possibilities</a>" ezine');
document.writeln('	    <a href="mailto:possibilities@willmaster.com">mailto:possibilities@willmaster.com</a><br />');
document.writeln('	    <br />');
document.writeln('	    Are you looking for top quality scripts? Visit');
document.writeln('	    <a href="http://www.web-source.net/cgi-bin/t.cgi?l=wm" target="blank">Willmaster</a>');
document.writeln('	    and check out his highly acclaimed Master Series scripts. Some free, some');
document.writeln('	    for a fee. </font></td>');
document.writeln('	</tr>');
document.writeln('      </table>');
document.writeln('      <p>');
document.writeln('      </p><center>');
document.writeln('	<table border="0" cellspacing="6" cellpadding="2" align="Center">');
document.writeln('	  <tr>');
document.writeln('	    <td><p align=Center>');
document.writeln('	      <font face="Verdana,Helvetica" size="2"><img width="7" height="7" border="0"');
document.writeln('		  src="http://www.web-source.net/graphics/bluetri.gif" />');
document.writeln('	      <b><a href="http://www.web-source.net/?syndicator" target="blank">Content');
document.writeln('	      Provided By</a></b></font><b>:</b><br />');
document.writeln('	      <a href="http://www.web-source.net/?syndicator" target="blank"><img src="http://www.web-source.net/graphics/ws_syn.gif"');
document.writeln('		  border="0" width="153" height="72" /></a></p></td>');
document.writeln('	  </tr>');
document.writeln('	</table>');
document.writeln('      </center>');
document.writeln('      <p>');
document.writeln('    </p></td>');
document.writeln('  </tr>');
document.writeln('</table>');
// -->
