Hi there simon9100,
I have simplified the code...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://simon.fabioth.net/"><!-- this is for testing purposes only -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Home</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var imgArr=new Array( // relative paths of images
'img/1.jpg',
'img/2.jpg',
'img/3.jpg'
);
var preloadArr=new Array();
var i;
/* preload images */
for(i=0;i< imgArr.length;i++){
preloadArr[i]=new Image();
preloadArr[i].src=imgArr[i];
}
var currImg=1;
var intID=setInterval(changeImg, 6000);
/* image rotator */
function changeImg(){
$('#background').animate({opacity: 0}, 1000, function(){
$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
$(this).css('background-size','cover');
}).animate({opacity: 1}, 1000);
}
});
</script>
<style type="text/css">
html,body {
height:100%;
margin:0;
background-color:#000;
}
#background {
height:100%;
background-image:url(img/1.jpg);
background-repeat:no-repeat;
background-position:100%;
background-size:cover;
}
#content {
position:absolute;
width:100%;
height:100%;
top:0;
}
h1 {
color:#fff;
text-align:center;
}
#nav {
position:absolute;
bottom:10px;
left:10px;
margin:0;
padding:0;
list-style:none;
font-weight:bold;
}
#nav li {
float:left;
margin-right:10px;
position:relative;
}
#nav a {
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover {
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
#nav ul {
position:absolute;
display:none;
margin:0;
padding:0;
background:rgba(255,255,255,0);
list-style:none;
}
#nav ul li {
padding-top:1px;
float:none;
}
#nav ul a {
white-space:nowrap;
}
#nav li:hover ul {
display:block;
left:0;
bottom:100%;
}
#nav li:hover a {
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a {
text-decoration:none;
}
#nav li:hover ul li a:hover {
background:#333;
}
</style>
</head>
<body>
<div id="background"></div>
<div id="content">
<h1>Hier komt wat tekst of foto's</h1>
<ul id="nav">
<li> <a href="#">Portfolio</a>
<ul>
<li><a href="#">Foto (1)</a></li>
<li><a href="#">Foto (2)</a></li>
<li><a href="#">Foto (3)</a></li>
<li><a href="#">Foto (4)</a></li>
</ul></li>
<li><a href="#">Informatie</a>
<ul>
<li><a href="#">Wat is</a></li>
<li><a href="#">Wie zijn</a></li>
<li><a href="#">Prijzen</a></li>
<li><a href="#">FAQ</a></li>
</ul></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Obviously, the CSS can be placed in an external file.
coothead