nisel
User
- Beiträge
- 1.134
- Punkte
- 0
Für alle die sowas auch suchen, hier ein kleines, aber feines Script um einen Layer auf die Webseite reinfliegen zu lassen. Im folgenden Script flattert der Layer von links nach rechts herrein. Er ist absolut anpassbar von der der Farbwahl zur Größe bis zum Inhalt kann alles was mit HTML zu tun hat gemacht werden 
Somit wird der Besucher umgehend auf aktuelle Angebote Zb: hingewießen, ganz wie Ihr wollt
In den Header Bereich <head>kommt der CSS Inhalt </head>
Ebenso müsst Ihr das javasript, welches den Layer fliegen lässt in den Head Bereich einbauen.
am besten gleich unter den CSS Block.
Und zum Schluss kommt noch der Teil des Layers, welcher in den Body Tag rein muss
<body>Start, Inhalt und Schließfunktion</body>
Das ganze sollte zum Schluss so ausschauen :wink:
Viel Spass damit :mrgreen:
Somit wird der Besucher umgehend auf aktuelle Angebote Zb: hingewießen, ganz wie Ihr wollt In den Header Bereich <head>kommt der CSS Inhalt </head>
Code:
<style type="text/css">
#Layer1 {
position: absolute;
left: -200px;
top: 100px;
width: 120px;
height: 20px;
border: 2px solid black;
background-color: black;
}
</style>Ebenso müsst Ihr das javasript, welches den Layer fliegen lässt in den Head Bereich einbauen.
am besten gleich unter den CSS Block.
Code:
<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>Und zum Schluss kommt noch der Teil des Layers, welcher in den Body Tag rein muss
<body>Start, Inhalt und Schließfunktion</body>
Code:
<body onload="startInterval('Layer1')">
<div id="Layer1">
Hier der Inhalt: Images, Textlink oder was auch immer.
[url="javascript:close('Layer1')"]schließen[/url]</div>Das ganze sollte zum Schluss so ausschauen :wink:
Code:
<html>
<head>
<title>Deine Webseite</title>
<style type="text/css">
#Layer1 {
position: absolute;
left: -200px;
top: 100px;
width: 120px;
height: 20px;
border: 2px solid black;
background-color: black;
}
</style>
<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>
</head>
<body text="#ffffff" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<body onload="startInterval('Layer1')">
<div id="Layer1">
Inhalt des Layers!
[url="javascript:close('Layer1')"]schließen[/url]</div>
</body>
</html>Viel Spass damit :mrgreen:
