<!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">
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;
}
span#info {
display: none;
}
a#infotrigger:hover span#info {
position: absolute;
left: 160px;
top: 240px;
width: 349px;
height: 89px;
position: absolute;
display: block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="apDiv1"> <a href="#" id="infotrigger"><img src="images/logo_r.gif" alt="adress details" name="rollover" id="rollover" /> <span id="info"> <img 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="mailto: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>
In bold is what I've added. Some lines from your old code have been removed.
What I've done here is used pure CSS (no jQuery) to trigger a display of an element on hover. But, do note that image maps here are pointless as the 'info' image will be shown only when you hover on logo - will disappear again when you mouseout from logo. So, an image map will make no sense.
-ST