Anfänger1979: Dropdown-Menü mit Rollover

Beitrag lesen

Hallo zusammen.

Ich brauche mal eure Hilfe. Ich habe eine allgemeine Verständnisfrage:

Der Nachfolgende Code kreiert ein Dropdown-Menü, wenn ich mit der Maus über die Schaltfläche "Schaltflaeche_Ueber_uns" fahre. Gleichzeitig wird diese Schaltfläche per Rollover grau hinterlegt und das bleibt Sie auch. Ich will aber, dass die Schaltfläche wieder Ihre Ursprungsfarbe erhält, bevor ich mit der Maus drübergefahren war. Das tut Sie im moment eben nicht - auch nicht, wenn ich die Maus aus dem Dropdown-Menü ziehe. Wie mache ich das? Ich habe es selbst bereits mit "onmouseout" versucht, aber wenn ich das mache, dann bekommt die Schaltfläche bereits Ihre Ursprungsfarbe, sobald ich mit der Maus die Schaltfläche selbst verlasse. Ich will aber, dass Sie Ihre Ursprungsfarbe erst bekommt, wenn ich mit der Maus das zu der Schaltfläche gehörende Dropdownfeld verlasse.

Kann mit hier jemand helfen, denn an der Problematik verzweifel ich langsam.

Vielen Dank im Voraus und hier nun der Code:

Der HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<!-- saved from url=(0014)about:internet -->  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>Schaltflaeche_Ueber_uns.png</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Sun Jul 17 22:15:56 GMT+0200 2011-->  
<script language="JavaScript1.2" type="text/javascript">  
<!--  
function MM_findObj(n, d) { //v4.01  
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {  
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  
  if(!x && d.getElementById) x=d.getElementById(n); return x;  
}  
function MM_swapImage() { //v3.0  
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)  
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}  
}  
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];}}  
}  
  
//-->  
</script>  
<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>  
<style type="text/css" media="screen">  
	@import url("./Schaltflaeche_Ueber_uns.css");  
</style>  
</head>  
<body bgcolor="#ffffff" onload="MM_preloadImages('Schaltflaeche_Ueber_uns_f2.png','Schaltflaeche_Ueber_uns.png');MM_swapImage('Schaltflaeche_Ueber_uns','','Schaltflaeche_Ueber_uns.png',1);">  
<div id="FWTableContainer1845192177">  
<a href="javascript:;" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MMMenuContainer0717183300_0', 'MMMenu0717183300_0',1,59,'Schaltflaeche_Ueber_uns');MM_swapImage('Schaltflaeche_Ueber_uns','','Schaltflaeche_Ueber_uns_f2.png',1);"><img name="Schaltflaeche_Ueber_uns" src="Schaltflaeche_Ueber_uns.png" width="172" height="32" border="0" id="Schaltflaeche_Ueber_uns" alt="" /></a><div id="MMMenuContainer0717183300_0">  
	<div id="MMMenu0717183300_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();">  
		<a href="ölkjölkj" id="MMMenu0717183300_0_Item_0" class="MMMIFVStyleMMMenu0717183300_0" onmouseover="MM_menuOverMenuItem('MMMenu0717183300_0');">  
			dfg&ouml;dlkfgj  
		</a>  
		<a href="ölkjölk" id="MMMenu0717183300_0_Item_1" class="MMMIVStyleMMMenu0717183300_0" onmouseover="MM_menuOverMenuItem('MMMenu0717183300_0');">  
			&ouml;lkj&ouml;lkj  
		</a>  
		<a href="ölkjö" id="MMMenu0717183300_0_Item_2" class="MMMIVStyleMMMenu0717183300_0" onmouseover="MM_menuOverMenuItem('MMMenu0717183300_0');">  
			&ouml;lkjl&ouml;kj  
		</a>  
		<a href="jklöj" id="MMMenu0717183300_0_Item_3" class="MMMIVStyleMMMenu0717183300_0" onmouseover="MM_menuOverMenuItem('MMMenu0717183300_0');">  
			&ouml;lkj&ouml;lkj&ouml;l  
		</a>  
	</div>  
</div>  
</div>  
</body>  
</html>

Der Javascript-Code:

var mmOpenContainer = null;  
var mmOpenMenus = null;  
var mmHideMenuTimer = null;  
  
function MM_menuStartTimeout(hideTimeout) {  
	mmHideMenuTimer = setTimeout("MM_menuHideMenus()", hideTimeout);	  
}  
  
function MM_menuHideMenus() {  
	MM_menuResetTimeout();  
	if(mmOpenContainer) {  
		var c = document.getElementById(mmOpenContainer);  
		c.style.visibility = "inherit";  
		mmOpenContainer = null;  
	}  
	if( mmOpenMenus ) {  
		for(var i = 0; i < mmOpenMenus.length ; i++) {  
			var m = document.getElementById(mmOpenMenus[i]);  
			m.style.visibility = "hidden";			  
		}  
		mmOpenMenus = null;  
	}  
}  
  
function MM_menuHideSubmenus(menuName) {  
	if( mmOpenMenus ) {  
		var h = false;  
		var c = 0;  
		for(var i = 0; i < mmOpenMenus.length ; i++) {  
			if( h ) {  
				var m = document.getElementById(mmOpenMenus[i]);  
				m.style.visibility = "hidden";  
			} else if( mmOpenMenus[i] == menuName ) {  
				h = true;  
			} else {  
				c++;  
			}  
		}  
		mmOpenMenus.length = c+1;  
	}  
}  
  
function MM_menuOverMenuItem(menuName, subMenuSuffix) {  
	MM_menuResetTimeout();  
	MM_menuHideSubmenus(menuName);  
	if( subMenuSuffix ) {  
		var subMenuName = "" + menuName + "_" + subMenuSuffix;  
		MM_menuShowSubMenu(subMenuName);  
	}  
}  
  
function MM_menuShowSubMenu(subMenuName) {  
	MM_menuResetTimeout();  
	var e = document.getElementById(subMenuName);  
	e.style.visibility = "inherit";  
	if( !mmOpenMenus ) {  
		mmOpenMenus = new Array;  
	}  
	mmOpenMenus[mmOpenMenus.length] = "" + subMenuName;  
}  
  
function MM_menuResetTimeout() {  
	if (mmHideMenuTimer) clearTimeout(mmHideMenuTimer);  
	mmHideMenuTimer = null;  
}  
  
function MM_menuShowMenu(containName, menuName, xOffset, yOffset, triggerName) {  
	MM_menuHideMenus();  
	MM_menuResetTimeout();  
	MM_menuShowMenuContainer(containName, xOffset, yOffset, triggerName);  
	MM_menuShowSubMenu(menuName);  
}  
  
function MM_menuShowMenuContainer(containName, x, y, triggerName) {	  
	var c = document.getElementById(containName);  
	var s = c.style;  
	s.visibility = "inherit";  
	  
	mmOpenContainer = "" + containName;  
}

Der CSS-Code:

td img {  
/* Another Mozilla/Netscape bug with making sure our images display correctly */  
	display: block;  
}  
  
#FWTableContainer1845192177 {  
/* The master div to make sure that our popup menus get aligned correctly.  Be careful when playing with this one. */  
	position:relative;  
	margin:0px;  
	width:172px;  
	height:32px;  
	text-align:left;  
}  
  
#MMMenuContainer0717183300_0 {  
/* This ID is related to the master menu div for menu MMMenuContainer0717183300_0 and contains the important positioning information for the menu as a whole */  
	position:absolute;  
	left:1px;  
	top:59px;  
	visibility:hidden;  
	z-index:300;  
}  
  
#MMMenu0717183300_0 {  
/* This class defines things about menu MMMenu0717183300_0's div. */  
	position:absolute;  
	left:0px;  
	top:0px;  
	visibility:hidden;  
	background-color:transparent;  
	width:300px;  
	height:88px;  
}  
  
.MMMIFVStyleMMMenu0717183300_0 {  
/* This class determines the general characteristics of the menu items in menu MMMenu0717183300_0 */  
	border-top:0px solid #ffffff;  
	border-left:0px solid #ffffff;  
	border-bottom:0px solid #ffffff;  
	border-right:0px solid #ffffff;  
	width:300px;  
	height:22px;  
	voice-family: "\"}\"";  
	voice-family:inherit;  
	width:294px;  
	height:16px;  
}  
  
.MMMIVStyleMMMenu0717183300_0 {  
/* This class determines the general characteristics of the menu items in menu MMMenu0717183300_0 */  
	border-top:0px;  
	border-left:0px solid #ffffff;  
	border-bottom:0px solid #ffffff;  
	border-right:0px solid #ffffff;  
	width:300px;  
	height:22px;  
	voice-family: "\"}\"";  
	voice-family:inherit;  
	width:294px;  
	height:16px;  
}  
  
#MMMenu0717183300_0_Item_0 {  
/* Unique ID for item 0 of menu MMMenu0717183300_0 so we can set its position */  
	left:0px;  
	top:0px;  
}  
  
#MMMenu0717183300_0_Item_1 {  
/* Unique ID for item 1 of menu MMMenu0717183300_0 so we can set its position */  
	left:0px;  
	top:22px;  
}  
  
#MMMenu0717183300_0_Item_2 {  
/* Unique ID for item 2 of menu MMMenu0717183300_0 so we can set its position */  
	left:0px;  
	top:44px;  
}  
  
#MMMenu0717183300_0_Item_3 {  
/* Unique ID for item 3 of menu MMMenu0717183300_0 so we can set its position */  
	left:0px;  
	top:66px;  
}  
  
#MMMenuContainer0717183300_0 img {  
/* needed for Mozilla/Camino/Netscape */  
	border:0px;  
}  
  
#MMMenuContainer0717183300_0 a {  
/* Controls the general apperance for menu MMMenuContainer0717183300_0's items, including color and font */  
	text-decoration:none;  
	font-family:Verdana, Arial, Helvetica, sans-serif;  
	font-size:12px;  
	color:#ffffff;  
	text-align:left;  
	vertical-align:middle;  
	padding:3px;  
	background-color:#afcb52;  
	font-weight:bold;  
	font-style:normal;  
	display:block;  
	position:absolute;  
}  
  
#MMMenuContainer0717183300_0 a:hover {  
/* Controls the mouse over effects for menu MMMenuContainer0717183300_0 */  
	color:#ffffff;  
	background-color:#7e7e7e;  
}