Philip Brechler: Helft einem kleinen Praktikanten!

Hallo!

Ich bin grade dabei ein Menü für ein Haussteuerungssystem zu programmieren. Die Buttons sind fertig, der Javascript fast...
Die 2 Probleme:
Wie schaffe ich es bei unten stehenden Script, das sich nur ein Submenü öffnen lässt und nicht 2 gleichzeitig. Eigentlich dachte ich müsste das mit der Funktion coll() gehen, die beim klicken des Buttons aufgerufen wird und alle bis auf das zu öffnende schließt. Das klappt aber eben nicht.
Außerdem:
Wie schaffe ich es, dass die Submenüs sich zentriet unter den Hauptknöpfen anordnet?

Vielen Dank schon im Vorraus für euere Mühen.

Hier nun der Code:

<html>
<head>
<title>Menü</title>
<style type="text/css">
<!--
 body
 {
  font-family: "Arial";
  font-size: 1pt;
   background-color: #ffffff;
  color: #000000;
  text-align: lef;
 }
 ul.zzul {list-style-type:none; display: block;}
 span.zzspace {left:0px;}
 a, a:visited {color: #0000ff;}
 a:hover { color: #ff0000;}
-->
</style>
<script type="text/javascript">
<!--
function exp_coll(ind)

{
 s = document.getElementById("sp_" + ind);
 if (s.style.display == 'none')
 {
   s.style.display = 'block';
 }
 else if (s.style.display == 'block')
 {
   s.style.display = 'none';

}
}

function exp(ind)
{
 s = document.getElementById("sp_" + ind);
 if (!(s && i && i2)) return false;
 s.style.display = 'block';
}

function coll(ind)
{
 s = document.getElementById("sp_" + ind);
 if (!(s && i && i2)) return false;
 s.style.display = 'none';
}

function coll_all()
{

coll(0);
 coll(9);
 coll(33);
 coll(85);
 coll(87);
}

function exp_all()
{

exp(0);
 exp(9);
 exp(33);
 exp(85);
 exp(87);
}
-->
</script>
</head>

<body background=menu.gif onload="coll_all()">
<center>
<br>
<ul style="list-style-type:none; margin:0; padding:0;">

<li><a href="javascript:exp_coll(0);"><img src="Zimmer1.gif" border="0" id="im_0" /></a>
<ul class="zzul" id="sp_0" style="display:none;">
<li><span class="zzspace" /><a href="wohnen.html" target=main><img src="wohnen1.gif" border=0></a></li>

<li><span class="zzspace" /><a href="kuche.html" target=main><img src="kueche1.gif" border=0></a></li>

<li><span class="zzspace" /><a href="eltern.html" target=main><img src=eltern1.gif border=0></a></li>

<li><a href="kind1.html" target=main><img src=kind11.gif border=0></a></li>

<li><a href="kind2.html" target=main><img src=kind21.gif border=0></a></li>

</ul></li>

<li><a href="javascript:exp_coll(9);"><img src="Sicherheit1.gif" border="0" id="im_9" /></a>
<ul class="zzul" id="sp_9" style="display:none;">

<li><a href="ubersicht.html" target=main><img src="ubersicht1.gif" border=0></a></li>

<li><a href="meldungen.html" target=main><img src="meldungen1.gif" border=0></a></li>

<li><a href="turkamera.html" target=main><img src="turkamera1.gif" border=0></a></li>

</ul></li>

<li><a href="javascript:exp_coll(33);"><img src="klima1.gif" border="0" id="im_33" /></a>
<ul class="zzul" id="sp_33" style="display:none;">

<li><a href="heizung" target=main><img src="heizung1.gif" border=0></a></li>

<li><a href="warmwasser.html" target=main><img src="warmwasser1.gif" border=0></a></li>

<li><a href="ventilation.html" target=main><img src="ventilation1.gif" border=0></a></li>

</ul></li>

<li><a href="javascript:exp_coll(85);"><img src="kommunikation1.gif" border="0" id="im_85" /></a>
<ul class="zzul" id="sp_85" style="display:none;">

<li><a href="email.html" target=main><img src="email1.gif" border=0></a></li>

<li><a href="telefon.html" target=main><img src="telefon1.gif" border=0></a></li>

<li><a href="fax.html" target=main><img src="fax1.gif" border=0></a></li>

</ul></li>

<li><a href="javascript:exp_coll(87);"><img src="system1.gif" border="0" id="im_87" /></a>
<ul class="zzul" id="sp_87" style="display:none;">

<li><a href="einstellungen.html" target=main><img src="einstellungen1.gif" border=0></a></li>

<li><a href="hilfe.html" target=main><img src="hilfe1.gif" border=0></a></li>

</ul></li>

</body>
</html>

MfG

Philip Brechler

  1. hallo ,

    Ich bin grade dabei ein Menü für ein Haussteuerungssystem zu programmieren. Die Buttons sind fertig, der Javascript fast...

    1. Fehlermeldung javacsript-konsole opera

    Event thread: load
    Error:
    name: ReferenceError
    message: Statement on line 28: Reference to undefined variable: i
    Backtrace:
      Line 28 of inline#1 script in /testhaus.htm
        if (! (s && i && i2))
          Line 35 of inline#1 script in /testhaus.htm
        coll(0);
      Line 1 of  script
        coll_all();
      At unknown location
        [statement source code not available]

    1. Fehlermeldung javacsript-konsole mozilla

    Fehler: i is not defined
    Quelldatei: /testhaus.htm
    Zeile: 47
     [[if (!(s && i && i2)) return false;]]
    mfg

  2. Lieber Philip,

    Was macht ein Besucher, wenn er Javascript nicht zur Verfügung hat? Google z.B. "kennt" kein Javascript und wird Deine Unterseiten nicht finden!
    Mit welchem Browser hast Du Dein Script getestet?
    Wie reagiert der Browser denn, wenn er sich _nicht_ Deiner Vorstellung nach verhält?
    Wessen geistiges Eigentum verwendest Du hier mit diesem Script?
    Warum nutzt Du solch veralteten Krams wie <center> und <body background=...>, wenn Du doch im <head> einen CSS-Bereich definiert hast?
    Du weißt, dass <a href="javascript:..."> absolut zu vermeiden ist? (Siehe erste Frage)

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    1. Hallo,

      Was macht ein Besucher, wenn er Javascript nicht zur Verfügung hat? Google z.B. "kennt" kein Javascript und wird Deine Unterseiten nicht finden!

      Alle Links stehen für Suchmaschinen zugänglich im HTML-Code und werden lediglich durch CSS ein- und ausgeblendet.

      Wessen geistiges Eigentum verwendest Du hier mit diesem Script?

      *g* Das Script ist eher eine Fingerübung als ein Werk mit nennenswerter Schöpfungshöhe.

      Du weißt, dass <a href="javascript:..."> absolut zu vermeiden ist? (Siehe erste Frage)

      Naja, vielleicht sollte man das präzisieren. Wenn man eine Grafik mit einer JavaScript-Funktionalität versehen will, sollte man möglichst automatisch beim Laden der Seite entsprechende Event-Handler vergeben (»unobtrusive JavaScript«), anstatt sie direkt im HTML-Code als Attribute zu notieren. Dasselbe gilt für style="display:none", was ja nur sinnig ist, wenn JavaScript aktiviert ist (die coll_all() übernimmt das Einklappen beim Laden ja bereits).

      Mathias