1. Den Hintergrund.
   Ein JPEG mit einem leichten Grünstich und Farbverlauf, das die komplette Seite ausfüllt und sich automatisch der Browersgröße anpasst.
2. Den Text-Layer
   Ein DIV-Container mit Anfangstext und blinkendem Cursor in Form einer GIF-Animation.
3. Den Raster-Layer
   Das Zeilenraster liegt über dem Text. Das Hintergrundbild dieses Layers besteht aus einem GIF, bei dem jede zweite Zeile undurchsichtig ist. Dadurch entsteht der Effekt eines Zeilenrasters, wie bei einem alten Terminal.

Die Technik

Das Terminal funktioniert mit Javascript. Nach dem Laden der Seite wird ein Timer initialisiert, der die Funktion printout() aufruft. Printout() wiederum arbeitet einen Text Buchstabe für Buchstabe ab und ruft sich dabei solange selbst solange über den Timer auf, bis es am Ende ist. Über spezielle Zeichen werden Zeilenumbrüche und Pausen realisiert. Jedes neue Zeichen wird an den letzten Textnode vom DIV-Container angefügt. Zeilenumbrüche werden als Nodes eingefügt.

<script language="JavaScript"> 
<!--//

 var laber = "*GEHEIM*#404 Page not Found"
             +"Click ˆ *to get back#";
 var laberpos = 0;
 var laberspeed = 700;
 var newLINK = document.createElement("a");
 var newTEXT = document.createTextNode("HERE");
 newLINK.appendChild(newTEXT);

 // initialize terminal on body.load
 function initTerminal() {
    setTimeout( "printout();" , laberspeed);  
 }

 // Timerfunction... get next char and change contentvalue
 function printout() {
    var lchar = laber.charAt(laberpos);
    var tcontent = document.getElementById('content'); 
    var tcursor = document.getElementById("cursor")
    var newLINE = document.createElement("br");
    var newTEXT = document.createTextNode("DAU@/var/www: ");
    laberpos++;

    if (lchar == "#") { // newline and 0.7 seconds delay
      laberspeed = 700;
      tcontent.insertBefore(newLINE, tcursor);
      tcontent.insertBefore(newTEXT, tcursor);
    } else if (lchar == "*") { // 0.8 seconds delay­
      laberspeed = 800;
    } else if (lchar == "ˆ") { // Link
      tcontent.insertBefore(newLINK, tcursor);
      var newTEXT = document.createTextNode("");
      tcontent.insertBefore(newTEXT, tcursor);
   } else { // printout the next char
      laberspeed = 10;  
      // write new content         
      tcontent.lastChild.previousSibling.appendData(lchar);
    }  

    if (laberpos<laber.length) { // retimer if not last char 
      setTimeout( "printout();" , laberspeed);
    }    
 }
//-->
</script>

Ich bin mir sicher, dass mein Verfahren nicht sehr elegant und flexibel ist. Dafür ist es aber einfach nachzuvollziehen und kurz.

Kompatibilität

Ursprünglich hatte ich einfach den Text des DIVs mit content.innerHTML ergänzt. Wenn aber das innerHTML eines Elementes ersetzt wird, dann muss es komplett neu gezeichnet werden. Während Firefox das ohne große Probleme packte, gab es beim Internet Explorer Performanceprobleme. Daher das aufwendige Einfügen neuer Zeichen und Knoten in die DOM-Struktur des Text-Layers.

Die 404-Seite funktioniert so mit allen Browsern (inklusive IE6 und Opera), sowie auf älteren Computern ohne Probleme.

Der Effekt mit dem Zeilenraster könnte noch verstärkt werden, wenn man ein PNG nimmt und mit dem Alpha-Wert der Zeilen spielt. Dadurch glühen die Buchstaben richtig. Leider beherrscht der IE6 keine Transparenz bei PNGs.

Einbinden in die eigene Homepage

Zuerst muss man herausfinden wo die Errordokumente liegen und wie sie benannt sind. Das ist je nach Provider unterschiedlich. Einfach mal mit einen FTP-Client browsen. Das folgende ZIP muss dort nur entpackt werden. Mit Bildern ist die Seite nur ca 17KB groß. Danach sollten natürlich die Texte und die Links auf die Bilder un der 404.hml angepasst werden. Aller Bilder müssen über ihren absoluten Pfad (z.B. /errosocs/cusor.gif) angesprochen werden.

Download­­

Source, Grafik­en und CSS 404­-error.zip (12 KB, ZIP)

Links

• de.wikipedia.org/wiki/404_error
• www.404lab.com