Ebene ein-/ausblenden Problem

TFRB · 19.11.2003, 15:49

Hi,

Hab ein Problem mit dem Punkt "Ebene ein-/ausblenden " unter "Verhalten". Ich möchte ein Ebenenmenü erstellen (wie hier im Tutorial", hab* jetzt nur das Problem das ich nur "onMouseover" einstellen. Wo kann ich denn einstellen das wenn die Maus nicht mehr über einer Ebene ist, eine Ebene ausgeblendet wird? Hab nirgendswo die Möglichkeit "onMouseout" einzustellen, immer nur "onMouseover", auch wenn ich noch einen Punkt "Ebene ein-/ausblenden " hinzufüge.
Im Tutorial sieht man ein Menü in dem man die ganzen verschiedenen Maus Zustände einstellen kann, dort sieht man bei mir leider nur "onMouseover" und "Ereignisse zeigen für", sonst nichts.

Für Hilfe wäre ich mehr als glücklich.

nurbs · 19.11.2003, 19:56

Hallo!

Da muss es noch eine Einstellung "ab Browserversion" geben! Dort stellst du "ab 4" ein!

TFRB · 20.11.2003, 10:21

Danke für den Tip. Jetzt funktioniert es! Hab jetzt bloss gleich das nächste Problem. Wenn ich jetzt mit der Maus auf das PopUp Menü gehe verschwindet es wieder. Wie bekomme ich das denn in den Griff?

nurbs · 20.11.2003, 14:11

eben wahrscheinlich weil du beim onMouseout "ausblenden" hast!

Stell mal den betroffenen Code rein!

TFRB · 20.11.2003, 17:44

du hast vollkommen recht. hab auf ausblenden gestellt. hab das jetzt auf einblenden umgestellt und schon bleibt das menü da. aber wie mache ich es, wenn ich will das das menü nur solange da bleibt wie die maus auch in dem bereich bleibt? ist ja irgendwie blöd wenn das menü die ganze zeit geöffnet ist und die maus wo ganz anders ist.
sorry für die doofen fragen. ich hoffe mal nach dieser habe ich keine mehr. auf jeden fall schon mal danke für die freundliche hilfe.
gruß

nurbs · 20.11.2003, 18:01

Das "ausblenden" für onMouseout ist schon ok!

Du führst dieses JS wahrscheinlich bei einem Textlink aus, wenn du dich mit der Maus von diesem Link entfernst wird die Ebene ausgeblendet!

Willst du jedoch den Bereich wo sich die Maus bewegen darf, ohne dass die Ebene ausgeblendet wird, größer haben musst du diesen Textlink in eine <td> oder <div> packen und auf diesen Bereich dann das JS ausführen!

Deshalb stell kurz mal den Quellcode rein dann schau ich mir das an!

TFRB · 20.11.2003, 18:11

Hier der ganze Code, da ich mir nicht sicher bin was Du davon brauchst.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(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>
</head>
<body>
<div id="navi" style="position:absolute; left:94px; top:103px; width:118px; height:12px; z-index:1">
<a href="#" onMouseOver="MM_showHideLayers('main','','show','bio','','hide')"
onMouseOut="MM_showHideLayers('main','','show','bio','','hide')">Main</a>____<a href="#"
onMouseOver="MM_showHideLayers('main','','hide','bio','','show')">Bio</a>____</div>
<div id="main" style="position:absolute; left:93px; top:122px; width:64px; height:84px; z-index:2; visibility: hidden;">
<p>heimat</p>
<p>seite</p>
</div>
<div id="bio" style="position:absolute; left:157px; top:122; width:55px; height:84; z-index:3; visibility: hidden;">
<p>lebenslauf</p>
<p>mehr</p>
</div>
</body>
</html>

nurbs · 20.11.2003, 19:46

Hallo!

Hab dir hier mal ne Lösung gebastelt!

Siehe hier die Vorschau

Code:

...
<head>
<title>FlyOut</title>
<style type="text/css">
<!--
body {
font-family : Arial;
font-size : 80%;
padding: 0px;
margin: 0px;
}
a {
color : #000;
text-decoration:underline;
}
#header_leiste {
margin: 2px 0px 0px 0px;
}
#menu1, #menu2 {
position: absolute;
top: 20px;
overflow: visible;
visibility: hidden;
}
#menu1 {
left: 0px;
}
#menu2 {
left: 32px;
}
#klapp {
margin: 0px;
padding: 0px;
color: #FFF;
}
#klapp a {
background-color: #FFF;
margin: 0px;
padding: 2px 0px 0px 0px;
display: block;
text-decoration:none;
color: #000;
width: 100px;
}
#klapp a:hover {
color: #CCC;
}
-->
</style>
<script language="JavaScript" 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_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(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>
</head>

<body>
<div id="header_leiste">
	<a href="#" onMouseOver="MM_showHideLayers('menu1','','show')">Main</a>
	<a href="#" onMouseOver="MM_showHideLayers('menu2','','show')">Bio</a>
</div>
<div id="menu1" onMouseOver="MM_showHideLayers('menu1','','show')" onMouseOut="MM_showHideLayers('menu1','','hide')">
	<div id="klapp">
		<a href="#" title="Heimat">Heimat</a>
		<a href="#" title="Seite">Seite</a>
	</div>
</div>
<div id="menu2" onMouseOver="MM_showHideLayers('menu2','','show')" onMouseOut="MM_showHideLayers('menu2','','hide')">
	<div id="klapp">
		<a href="#" title="Lebenslauf">Lebenslauf</a>
		<a href="#" title="Heimat">Heimat</a>
	</div>
</div>
</div>
</body>
...

Hab mit CSS die Ebenen Positioniert und etwas formatiert! Falls du dich damit nicht auskennst fragst halt nochmal

TFRB · 20.11.2003, 20:06

Alles klar, ich werd mir das mal ganz in ruhe anschauen. Das wird vermutlich etwas dauern. Bin halt leider noch ein Neuling.
Auf jeden Fall für Deine Hilfe und die Mühe.
Gruß