Did that remind you of Pointcast or what? That little intro just begins to show off the capabilities of a new Netscape technology: Layers. Not only can you specify exactly where you want your images (or text) to be placed, you can also move your images anywhere on the page. Just specify the offset or the absolute coordinates and the rest will be done for you. After experimenting with layers for a small amount of time, I found that they are very much like the layers you deal with in Photoshop. A layer of a higher z-order is always displayed on top of a layer that has a lower z-order. You can specify that a layer be "transparent" or have a solid background image or color. There are many other options that you can control, but first let's get to the fundamentals: how to create a layer. Very simple:
<LAYER NAME = "myLayer" HEIGHT = 50 WIDTH = 89 LEFT = 93 TOP = 91 VISIBILITY = HIDE>
var myLayer = document.layers["myLayer"];
The offset() method uses x,y coordinates to control the placement of a layer. The above line will move the layer (and all of its contents) to the right 10 pixels and down 5 pixels. Making those numbers negative will move the layer to the left 10 and up 5. Keep in mind, the offset() method doesn't say exactly where the layer is on the page, just how much it should be moved relative to where it currently resides. To control its absolute placement on the page, us the layer's left and top properties.
myLayer.left = 100;
myLayer.top = 100;
myLayer.visibility = "HIDE";
The layer will then disappear. To make it reappear set visibility back to "SHOW". Using this property, you can create something similar to dynamic image menus, but with text and other media. The possibilities are endless.
Now you may ask, "How did you did you slide those graphics across the page?" Well, I combined the offset() method with setTimeout(). Each time setTimeout() was run, it moved the layers a given distance across the page. Repeat this process a given number of times and the layers will end up in the correct places and eventually form a JTotW title image. I'm not going to go in detail on how it was done this week: just poke around in the source and you'll figure it out. After all, you now know how to control layers, the rest is just creativity.