Thanks Sudarhan. Right now I don't have a testserver (lost iDisk) but here's the full code I have so far.
Please note that for the mean time I have the image that I want to act as the rollover now set to fade up (11 sec) using jQuery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="info" />
<meta name="robots" content="index,follow,noarchive" />
<meta name="keywords" content="info" />
<title>name website</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#rollover').delay(6500).fadeIn(1500);
$('.adres').delay(7500).fadeIn(1000);
$('#panel').delay(11000).fadeIn(1000);
});
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
<style type="text/css">
<!--
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
background-color: #ECF1F5;
text-align: center;
}
#main {
height: 540px;
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
z-index: 0;
}
.main_img {
margin-top: 0px;
margin-right: 60px;
margin-left: 60px;
background-color: #FFF;
}
#h2 {
background-color: #FFF;
height: 80px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
.adres {
margin-top: 10px;
margin-left: 116px;
display: none;
}
#wrapper {
height: 620px;
width: 960px;
margin-right: auto;
margin-left: auto;
top: 0px;
}
#apDiv1 {
position:absolute;
width:900px;
height:424px;
z-index:1;
}
#pen {
margin-top: 200px;
margin-left: -100px;
}
#rollover {
margin-left: 702px;
margin-top: 60px;
height: 92px;
width: 194px;
z-index: 2;
display: none;
}
#rollover a {
border:none;
text-decoration:none;
position: relative;
margin-bottom: 100px;
}
#rollover a span {
display:none;
position: absolute;
/**adjust positioning of full size images in px or %**/
left: -300px;
top: 300px;
z-index: 3;
}
#rollover a:hover span, #rollover a:active span, #rollover a:focus span {
display:block;
}
#panel {
margin-top: 200px;
display: none;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="apDiv1">
<a href="#"><img src="images/logo_r.gif" alt="adress details" name="rollover" id="rollover" /><span><image src="images/26letters.png" alt=" headline" name="panel" border="0" usemap="#panelMap" id="panel" />
<map name="panelMap" id="panelMap">
<area shape="poly" coords="14,19" href="#" />
<area shape="poly" coords="12,21,31,70,324,80,338,8" href="name@company.nl" alt="email" />
</map>
</span></a></div>
<div class="main" id="main">
<img src="images/h1.gif" alt="headlines" name="main_img" width="840" height="540" class="main_img" id="main_img" />
<div class="h2" id="h2"><img src="images/h2.png" alt="adress details" name="adres" width="718" height="26" border="0" usemap="#adresMap" class="adres" id="adres" />
<map name="adresMap" id="adresMap">
<area shape="rect" coords="0,2,163,34" href="mailto:name@company.nl" alt="email" />
</map>
</div>
</div>
</div>
</div>
</body>
</html>
