Hendrik: onClick arbeitet anders als <script>

SELF-Forum

onClick arbeitet anders als <script>

Hendrik
– Informationen zu den Bewertungsregeln

Hallo,
ich bin immernoch mir meinem Projekt verheiratet.
Doch ich habe ein Problem, ich will mein Menü über eine javascript steuern, nicht über direkte befehle im "onClick" handler.

Unter seht ihr mein Projekt, in <a onMouseOver="Show('1')">start</a> steht ein Aufruf des Javascripts, überall darunter direktaufrufe.
Ich will aber dass das javascript funktioniert, und das tut es nicht.
Ich habe leider nicht genug durchblick in Javascript, um den Fehler zu finde, deshalb bitte ich um Hilfe, bei meinem Problem. Es währe schön wenn irgendwer den Fehler findet.

Danke
   Hendrik

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {
 color:#004b8c;
 background-color:#888;
 padding:0px;
 margin:0px;
}
.title {
 color:#004b8c;
 position:fixed;
 background-image:url(http://www.fortunecity.de/parkalleen/parkallee/612/back.jpg);
 top:0px;
 left:0px;
 width:100%;
 padding:3px;
 height:20px;
 border-bottom-color:#004b08c;
 border-bottom-style:solid;
 border-bottom-width:1px;
}
.title span {
 background-color:transparent;
 font-family:verdana;
 font-size:18px;
 word-spacing:4px;
}
.subtitle {
 color:#004b8c;
 position:fixed;
 background-image:url(http://www.fortunecity.de/parkalleen/parkallee/612/back.jpg);
top:27px;
left:0px;
 width:100%;
 padding:3px;
 height:20px;
 border-bottom-color:#004b08c;
 border-bottom-style:solid;
 border-bottom-width:1px;
}
.subtitle span{
 font-family:verdana;
 font-size:18px;
}

#menu1{
 position:fixed;
 top:27px;
 left:5px;
 display:none;
}
#menu2{
 position:fixed;
 top:27px;
 left:50px;
 display:none;
}
#menu3{
 position:fixed;
 top:27px;
 left:150px;
 display:none;
}
#menu4{
 position:fixed;
 top:27px;
 left:200px;
 display:none;
}
#menu5{
 position:fixed;
 top:27px;
 left:260px;
 display:none;
}
#menu6{
 position:fixed;
 top:27px;
 left:360px;
 display:none;
}
#menu7{
 position:fixed;
 top:27px;
 left:430px;
 display:none;
}
#menu8{
 position:fixed;
 top:27px;
 left:500px;
 display:none;
}
#menu9{
 position:fixed;
 top:27px;
 left:600px;
 display:none;
}

</style>

<script type="javascript">
<!--
function Show(no)
{
 switch(no)
 case 1:
 dokument.getElementById("menu1").style.display = "block";
 break;
}
//-->

</script>
<link rel="stylesheet" href="menu.css" type="text/css">
</head>
<body>

<div class="title">
 <span>
  <a onMouseOver="Show('1')">start</a>
  <a onMouseOver="document.getElementById('menu2').style.display = 'block';">guestbook</a>
  <a onMouseOver="document.getElementById('menu3').style.display = 'block';">chat</a>
  <a onMouseOver="document.getElementById('menu4').style.display = 'block';">forum</a>
  <a onMouseOver="document.getElementById('menu5').style.display = 'block';">downloads</a>
  <a onMouseOver="document.getElementById('menu6').style.display = 'block';">games</a>
  <a onMouseOver="document.getElementById('menu7').style.display = 'block';">links</a>
  <a onMouseOver="document.getElementById('menu8').style.display = 'block';">über mich</a>
  <a onMouseOver="document.getElementById('menu9').style.display = 'block';">email</a>
 </span>
</div>

<div class="subtitle">
 <span id="menu1">start</span>
 <span id="menu2">guestbook</span>
 <span id="menu3">chat</span>
 <span id="menu4">forum</span>
 <span id="menu5">downloads</span>
 <span id="menu6">games</span>
 <span id="menu7">links</span>
 <span id="menu8">über mich</span>
 <span id="menu9">email</span>
</div>

<br><br><br><br><br><br><br><br><br><br>

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. onClick arbeitet anders als <script>

    Lukas Hänel
    – Informationen zu den Bewertungsregeln

    Hallo Hendrik.

    Ich erinnnere mich an ein Posting vor in Paar minuten gelesen zu haben mit genau dem gleichem Fehler.

    <script type="javascript">

    Schau mal dort nach:
    http://selfhtml.teamone.de/diverses/mimetypen.htm#uebersicht
    Als Fehler kommt doch sicher sowas wie "Objekt erwartet"?

    Außerdem würde ich dir raten, wenn du bei stylesheets für ähnliche Elemente die gleichen Eigenschaften hast, diese nicht jeder einzelnen Id zuzuweisen, sondern entweder alle aufzuzählen (#menu1,#menu2,#menu3,...{...} ) oder als <div ausdruck="mies"> generelle Formatierung des Tags in der Id des Elternelements.</div>. Also ".subtitle span { position:fixed; display:none; top:27; }"

    cu.Lukas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. onClick arbeitet anders als <script>

      Hendrik
      – Informationen zu den Bewertungsregeln

      <script type="javascript">
      Schau mal dort nach:
      http://selfhtml.teamone.de/diverses/mimetypen.htm#uebersicht
      Als Fehler kommt doch sicher sowas wie "Objekt erwartet"?

      Da kommt garnix, es passiert nur nichts :|

      Außerdem würde ich dir raten, wenn du bei stylesheets für ähnliche Elemente die gleichen Eigenschaften hast, diese nicht jeder einzelnen Id zuzuweisen, sondern entweder alle aufzuzählen

      display:none; soll ja für jeden Teil seperrat gelenkt sein
      left:###; ist überall anders und
      position:fixed; ist zwingend nötig

      cu.Lukas

      cu hendrik

      PS: probiers den file doch mal aus und geht mit der Maus auf Start, DAS meine ich =)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. onClick arbeitet anders als <script>

        Lukas Hänel
        – Informationen zu den Bewertungsregeln

        Hallo hendrik

        <script type="javascript">
        Schau mal dort nach:
        http://selfhtml.teamone.de/diverses/mimetypen.htm#uebersicht

        Es muss heißen type="text/javascript"
        Dann wird auch eher was passieren.

        Als Fehler kommt doch sicher sowas wie "Objekt erwartet"?
        Da kommt garnix, es passiert nur nichts :|

        Dann musst du mal in deinen Browsereinstellunen Fehlermeldungen aktivieren. Bei mir kommt da sehr wohl "Objekt erwartet". Bzw. du musst im IE unten links in der Statuszeile auf das gelbe Symbol klicken. Weil das Script nicht interpretiert wird, gibt es die Funktion show() nicht und wenn man mit der Maus über das Objekt geht wird eine undefinierte Funktion aufgerufen und es kommt die Meldung, dass anstelle von "undefined" ein Objekt erwartet wurde.

        »»PS: probiers den file doch mal aus und geht mit der Maus auf Start, DAS meine ich =)
        Dabei sind mir dann noch ein paar Fehler aufgefallen:
        1. Syntaxfehler: Die Funktion switch erfordert einen Anweisungsblock ( {...} )
        siehe http://selfhtml.teamone.de/javascript/sprache/bedingt.htm#switch
        2. logischer Fehler: du übergibst der Funktion die Zeichenkette "1", fragst aber nur nach dem Wert "1" du musst also entweder bei Case auch Anführungsstriche verwenden, oder den Aufruf ohne Anführungszeichen starten.
        3. Orthographiefehler: "dokument.get..." JS basiert wie die meisten Programmiersprache auf der englischen Sprache. ->document..

        Diese Fehler hättest du aber sicher auch selbst gefunden, wenn du meinem Link gefolgt wärst. Da hättest du feststellen können, dass es keinen mimeType "javascript" gibt.

        zu den Styles:

        display:none; soll ja für jeden Teil seperrat gelenkt sein

        Du veränderst aber mit dem JS nicht die CSS-Id Angabe sondern die angezeigte Angabe.

        left:###; ist überall anders

        Das musst du ja auch lassen,

        position:fixed; ist zwingend nötig

        aber doch nicht bei jedem einzeln, oder? es reicht, wenn man dass, wie ich im letzten Bsp geschrieben habe macht:

        .subtitle span { position:fixed; display:none; top:27; }

        Dazu auch hilfreich: http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente

        cu.Lukas

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. onClick arbeitet anders als <script>

          Lukas Hänel
          – Informationen zu den Bewertungsregeln

          Hallo hendrik.

          Ich habe mal ein bisschen rumgebastelt. Dürfte jetzt aber nicht mehr unter allen Browsern funktionieren... dafür sehr kompakt im Script-bereich.

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
          <html>
          <head>
          <title></title>
          <style type="text/css">
          body {
           color:#004b8c;
           background-color:#888;
           padding:0px;
           margin:0px;
          }
          .title {
           color:#004b8c;
           position:fixed;
           background-image:url(http://www.fortunecity.de/parkalleen/parkallee/612/back.jpg);
           top:0px;
           left:0px;
           width:100%;
           padding:3px;
           height:20px;
           border-bottom-color:#004b08c;
           border-bottom-style:solid;
           border-bottom-width:1px;
          }
          .title span {
           background-color:transparent;
           font-family:verdana;
           font-size:18px;
           word-spacing:4px;
          }
          .subtitle {
           color:#004b8c;
           position:fixed;
           background-image:url(http://www.fortunecity.de/parkalleen/parkallee/612/back.jpg);
           top:27px;
           left:0px;
           width:100%;
           padding:3px;
           height:20px;
           border-bottom-color:#004b08c;
           border-bottom-style:solid;
           border-bottom-width:1px;
          }
          .subtitle span{
           font-family:verdana;
           font-size:18px;
           position:fixed;
           display:none;
           top:27px;
          }

          #menu1{ left:5px; }
          #menu2{ left:50px; }
          #menu3{ left:150px; }
          #menu4{ left:200px; }
          #menu5{ left:260px; }
          #menu6{ left:360px; }
          #menu7{ left:430px; }
          #menu8{ left:500px; }
          #menu9{ left:600px; }

          </style>

          <script type="text/javascript">
          <!--
          function Show()
          { var firedobj = ns6 ? e.target : event.srcElement;
             if(firedobj.id.indexOf("li") == 0)
             { z.style.display = "none";
               z = document.getElementById("menu"+firedobj.id.charAt(2));
               z.style.display = "block";
          }  }
          function init()
          { ns6 = document.getElementById && !document.all;
            if ( document.all || ns6)
            { document.onmouseover = Show;
            z  = document.getElementById("menu1"); } }
          //-->
          </script>
          <link rel="stylesheet" href="menu.css" type="text/css">
          </head>
          <body onLoad="init()">

          <div class="title">
           <span>
            <a id="li1">start</a>
            <a id="li2">guestbook</a>
            <a id="li3">chat</a>
            <a id="li4">forum</a>
            <a id="li5">downloads</a>
            <a id="li6">games</a>
            <a id="li7">links</a>
            <a id="li8">über mich</a>
            <a id="li9">email</a>
           </span>
          </div>

          <div class="subtitle">
           <span id="menu1">start</span>
           <span id="menu2">guestbook</span>
           <span id="menu3">chat</span>
           <span id="menu4">forum</span>
           <span id="menu5">downloads</span>
           <span id="menu6">games</span>
           <span id="menu7">links</span>
           <span id="menu8">über mich</span>
           <span id="menu9">email</span>
          </div>

          <br><br><br><br><br><br><br><br><br><br>

          </body>
          </html>

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. onClick arbeitet anders als <script>

    Ronny
    – Informationen zu den Bewertungsregeln

    Hi,

    Das:

    <script type="javascript">

    Muß so lauten:
    <script type="text/javascript">

    Hier müssen Klammern rein:

    <!--
    function Show(no)
    {
    switch(no)

    {

    case 1:
    dokument.getElementById("menu1").style.display = "block";
    break;

    }

    }
    //-->

    dokument.getElementById("menu1").style.display = "block";

    und document schreibt man mit "c"!

    Dann klappt's auch mit dem Script,

    Ronny

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln