In diesem Tutorial möchte ich euch zeigen, wie man ganz einfach einen eigenen Layer erstellen kann. Dieser wird von der linken Seite hineinfliegen und mit einem Klick verschwindet er wieder. Dazu werden nur ein paar Zeilen in HTML, CSS und Javascript benötigt.
HTML-Basis
Zuerst erstellen wir eine simple HTML Seite mit einem <div> Element, welches unseren Layer darstellt. Die Eigenschaft onload vom <body> starten ein Intervall, welches das Einblenden des Layers startet. Durch einen Klick auf den Link „schließen“ wird die Funktion close() aufgerufen.
<html>
<head>
<title>Meine Seite</title>
</head>
<body onload="startInterval()" >
<div id="Layer1">
Layer1
<a href="javascript:close()">schließen</a>
</div>
</body>
</html>Cascading Style Sheets
Folgenden CSS-Code fügen wir einfach in den <head> Bereich ein.
<style type="text/css">
#Layer1 {
position: absolute;
left: -200px;
top: 100px;
width: 200px;
height: 200px;
border: 2px solid black;
background-color: red;
}
</style>Durch die Eigenschaft position: absolute können wir mit Hilfe von left und top dem betroffenen Element eine Position relative zum Elternelement zuweisen, in diesem Fall ist dies <body>. Damit sich der Layer vom Hintergrund abhebt, wird eine andere Hintergrundfarbe gewählt und zusätzlich noch ein Rahmen.
JavaScript Funktionen
Mit Hilfe eines kurzen JavaScript-Codes können wir jetzt den Layer hineinfliegen lassen. Dieser Code muß auch wieder in den <head> Bereich eingefügt werden.
<script type="text/javascript">
var left=-200;
var intervalid;
function changePos(id){
document.getElementById(id).style.left=left;
}
function moveIn(id){
if(left>=100){
clearInterval(intervalid);
}
left+=5;
changePos(id);
}
function close(id){
document.getElementById(id).style.left=-300;
}
function startInterval(id){
intervalid=setInterval("moveIn('"+id+"')",10);
}
</script>In Wirklichkeit fliegt der Layer nicht hinein, sonder es sieht nur so aus, weil wir alle 10 Millisekunden die Position des Layers minimal verändern. Die Variablen left und intervalid brauchen wir, um die aktuelle Position zu speichern bzw. um später den Aufruf unserer moveIn() Funktion wieder zu beenden. Die Funktion changePos(id) verändert einfach die CSS-Eigenschaft left des betroffenen Elementes und wird durch die Funktion moveIn() aufgerufen. Wenn der gewünschte Wert für die Variable left erreicht worden ist, werden die weiteren Aufrufe der Funktion gestoppt. Die Funktion close(id) versteckt einfach das Element mit der übergebenen ID.
Natürlich ist dieser Layer eine sehr simple Variante, aber weil es ein <div> Container ist, kann man damit so gut wie alles machen, was mit HTML möglich ist. Zum Beispiel können Bilder eingefügt werden oder ein richtiger Schließen-Button im rechten oberen Eck. Viel Spaß beim Experimentieren, falls ihr noch Fragen habt nutzt einfach die Kommentarfunktion.
Beispiel aus dem Tutorial
(Zum Speichern Rechtsklick und „Speichern unter“)
