hier nochmal der komplette Quellcode:
<html>
<head>
<style type='text/css'>
body {
background: #FFFFFF;
}
div.mitte {
margin-left: 50%;
}
div.frame {
position: absolute;
background: url(../img/frame.gif) no-repeat;
height: 600px;
width: 500px;
}
div.bg {
position: relative;
background: url(../img/bg/bg1.jpg) no-repeat 50% 50%;
height: 600px;
width: 500px;
margin-left: -250px;
}
div.text {
position: absolute;
height: 285px;
width: 236px;
left: 150px;
top: 150px;
overflow: auto;
}
div.menu {
position: absolute;
background: #FF0000;
height: 200px;
width: 186px;
left: 15px;
visibility: hidden;
}
div.arrows {
position: absolute;
width: 186px;
top: 410px;
left: 166px;
}
div.header {
position: relative;
background: #00FF00;
width: 218px;
}
div.arrowr {
position: absolute;
background: url(../img/arrowr1.gif) no-repeat;
height: 29px;
width: 26px;
left: 160px;
visibility: hidden;
}
div.arrowl {
position: absolute;
background: url(../img/arrowl1.gif) no-repeat;
height: 29px;
width: 26px;
visibility: hidden;
}
#center div {
text-align: center;
}
#schrift span {
color: #F3F3F3;
font: 14px 'Verdana';
}
#schrift h1 {
display: block;
color: #FFFFFF;
font: 16px 'Verdana';
}
#beschreibung acronym {
color: #D0D0D0;
font: 14px 'Verdana';
}
</style>
<?php
$bg_pfad = "../img/bg/";
$max = 0;
$dh = opendir($bg_pfad);
while ($datei = readdir($dh)) {
if($datei !== "" &&
$datei !== "." &&
$datei !== ".." &&
!is_dir($datei)) {
$max++;
}
}
?>
<script type='text/javascript'>
i = 1;
max = <?php echo "$max"; ?>;
function sicht (id,status) {
if (status=='false') {document.getElementById(id).style.visibility='hidden';}
if (status=='true') {document.getElementById(id).style.visibility='visible';}
}
function tauschen (id,zahl) {
document.getElementById(id).style.backgroundImage='url(../img/'+id+zahl+'.gif)';
}
function bg (direction) {
if (direction=='right') {
i++; if (i-1==max) {i=1};
document.getElementById('bg').style.backgroundImage='url(../img/bg/bg'+i+'.jpg)';}
if (direction=='left') {
i--; if (i==0) {i=max};
document.getElementById('bg').style.backgroundImage='url(../img/bg/bg'+i+'.jpg)';}
if (i==1) {document.getElementById('text').innerHTML='irre Spiegelung';}
if (i==2) {document.getElementById('text').innerHTML='BSP III';}
}
</script>
</head>
<body>
<div class='mitte'/>
<div id='bg' class='bg'/>
<div id='center'/>
<div id='schrift'/>
<div class='text'/>
<span><div id='header' class='header' onmouseover="sicht('menu','true'); alert('blubb');" onmouseout="sicht('menu','false');"/>
<h1><b>Überschrift</b></h1>
<div id='menu' class='menu'/></div>
</div>
<p>Schwer umweht die Abendluft,<br>
fährt grell entlang den erden Farben,<br>
um mich herum erblühet Dämmerlicht,<br>
verheißt ein wenig Ewigkeit,<br>
bis sich erneut am eigen Niedergange tut erlaben.</p>
<p>Ein Blick zu mir flieht aus dem Wald,<br>
schenkt meinem Dasein Wirklichkeit,<br>
und eilt zurück,<br>
nun ist's der meine,<br>
sucht tastend Augen,<br>
doch erfahret keine....</p>
<p>Ein Gefühl bricht hervor aus tiefem Holze,<br>
durchflutet mich<br>
ein rasend Strome,<br>
tastet<br>
wühlt sich<br>
tief hinein<br>
ein fühlend Herz,<br>
verschreckt von Leere,<br>
gebiert es Schmerz....</p></span>
</div>
</div>
</div>
<div class='frame'/>
<div id='center'/>
<div id='arrows' class='arrows' onmouseover="sicht('menu','true'); sicht('arrowr','true'); sicht('arrowl','true');" onmouseout="sicht('menu','false'); sicht('arrowr','false'); sicht('arrowl','false');"/>
<a href="javascript:bg('left')"/><div id='arrowl' class='arrowl' onmouseover="sicht('arrowr','true'); sicht('arrowl','true'); tauschen('arrowl','2');" onmouseout="sicht('arrowr','false'); sicht('arrowl','false'); tauschen('arrowl','1');"/></div></a>
<a href="javascript:bg('right')"/><div id='arrowr' class='arrowr' onmouseover="sicht('arrowr','true'); sicht('arrowl','true'); tauschen('arrowr','2');" onmouseout="sicht('arrowr','false'); sicht('arrowl','false'); tauschen('arrowr','1');"/></div></a>
<br><div id='beschreibung'/><acronym title='mit den Pfeilen kannst du das Bild verändern!'><p id='text'>irre Spiegelung</p></acronym></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>