Hallo Fredi,
habe mal ein Beispiel gebastelt.
Für das Banner zwei Imagemaps angelegt (News und Alwin).
Wenn Du mit der Maus über News und Alwin fährst, dann öffnet sich ein Menü.
Du wirst aber ganz ohne HTML- und Javascript-Kenntnisse nicht viel damit anfangen können.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu</title>
<script type="text/javascript">
Menu = {timer : null, current : null};
Menu.getStyle = function(name){
if(document.getElementById) return document.getElementById(name).style;
else if(document.all) return document.all[name].style;
else if(document.layers) return document.layers[name];
}
Menu.show = function(name){
if(this.timer) clearTimeout(this.timer);
this.getStyle(name).visibility = "visible";
this.current = name;
}
Menu.hide = function(){
this.timer = setTimeout("Menu.doHide()",2000);
}
Menu.doHide = function(){
if(this.current){
this.getStyle(this.current).visibility = "hidden";
this.current = null;
}
}
</script>
<style type="text/css">
#subnav1 {position:absolute;top:150px;left:160px;z-index:10;visibility:hidden}
#subnav2 {position:absolute;top:150px;left:210px;z-index:11;visibility:hidden}
</style>
</head>
<body>
<img src="Banner_AlwinNele_eng.jpg" alt="banner" height="140" width="955" usemap="#map" border="0">
<map name="map">
<area shape="rect" coords="143,88,199,118" alt="News" onmouseover="Menu.doHide(); Menu.show('subnav1');" onmouseout="Menu.hide();" onfocus="blur();" href="#">
<area shape="rect" coords="201,88,255,118" alt="Alwin" onmouseover="Menu.doHide(); Menu.show('subnav2');" onmouseout="Menu.hide();" onfocus="blur();" href="#">
</map>
<div id="subnav1" onmouseover="Menu.show(this.id);" onmouseout="Menu.hide();">
<table border="0" cellspacing="0" cellpadding="2">
<tr><td><a href="#">MenuPunkt 1</a></td></tr>
<tr><td><a href="#">MenuPunkt 2</a></td></tr>
<tr><td><a href="#">MenuPunkt 3</a></td></tr>
</table>
</div>
<div id="subnav2" onmouseover="Menu.show(this.id);" onmouseout="Menu.hide();">
<table border="0" cellspacing="0" cellpadding="2">
<tr><td><a href="#">MenuPunkt 4</a></td></tr>
<tr><td><a href="#">MenuPunkt 5</a></td></tr>
<tr><td><a href="#">MenuPunkt 6</a></td></tr>
</table>
</div>
</body>
</html>
Gruß Sabine
