non-underlined links
When you define a link in an html file it will be underlined on the screen. Very often this does not look very beautiful. With a little help from CSS you can get links that are not underlined.
download example

a { text-decoration:none; }

You can even define a different text-color when the mouse cursor is on a link.

a:hover { color:#cccccc; }

image rollovers
There are several ways how to program image rollovers. A very elegant way is listed below. Add the code to your html header in order to assure that the pictures are pre-loaded.
download example

teston=new Image();
teston.src="sun.gif";
testoff=new Image();
testoff.src="moon.gif";

function turnOn(imgName)
{
  document[imgName].src=eval(imgName + "on.src");
}

function turnOff(imgName)
{
  document[imgName].src=eval(imgName + "off.src");
}

Now you have to catch the events onmouseout and onmouseover and call the functions that switch the pictures.

<A href="home.htm" onmouseover="turnOn('test');" onmouseout="turnOff('test');">
  <IMG src="moon.gif" name="test"></IMG>
</A>

page preload
When you have a web page that has a lot of graphics it takes a while to load all of them and the visitor will see the pictures appearing one after the other. This is surely not very beautiful and can be avoided by an elegant trick. Simply put a black curtain on top of the page and do not take it away until the page is loaded completely.
download example

<DIV id="divBlackCurtain">
  <TABLE width="100%" height="100%" align="center" valign="middle">
    <TR><TD width="100%" height="100%" align="center" valign="middle">
     <FONT face="Arial" color="#ffffff" size="2">loading...</FONT>
    </TD></TR>
  </TABLE>
</DIV>

Add the code above right after the BODY tag so that it will be executed at the very beginning of the page visualization. A certain text is written in the center of the window.
In order to make sure that the layer with the table covers the whole window use the CSS definitions below.

#divBlackCurtain {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #000000;
  layer-background-color: #000000;
  z-index: 999; }

When the page is completely loaded the event onload of the BODY will fire. You have to catch it in order to call a function that will make the black curtain disappear again.

<BODY onload="hideLayer()">

All that remains to be done is a little JavaScript function that makes the layer with the black curtain invisible.

n=document.layers;
ie=document.all;

function hideLayer()
{
  if(n) document.divBlackCurtain.visibility="hidden"
  else if(ie) document.all.divBlackCurtain.style.visibility="hidden";
}

animating content
Part of a webpage can be animated by first putting the content in its own layer and then changing the layer's coordinates in regular time intervals. For example, you can make a layer shake a little bit by randomly moving it around its current position.
download example

<DIV id="shake">hello people!</DIV>

The layer id defined above contains the text that we want to move around a little bit.
Now we can include the JavaScript code that is necessary to change the coordinates of the layer.

n=document.layers;
ie=document.all;

function doShake()
{
  if(ie)  // Internet Explorer
  {
    document.all.shake.style.pixelLeft+=Math.random()*10-5;
    document.all.shake.style.pixelTop+=Math.random()*10-5;
  }
  else  // Netscape Communicator
  {
    document.shake.left+=Math.random()*10-5;
    document.shake.top+=Math.random()*10-5;
  }
}

Unfortunately, we have to distinguish between different browsers.
In order to make the code above work we have to declare the coordinates of the layer as being relative.

#shake {
  position: relative;
}

Now we can animate the layer by changing its coordinates in regular intervals.

var shakeTimer;

function initShake()
{
  if(n||ie)
    shakeTimer = setInterval('doShake()', 100);
}

function stopShake()
{
  if(n||ie)
    clearInterval(shakeTimer);
}