Christian: Navigationsproblem

ich habe eine Tabelle mit 1 Spalte und 11 Zeilen. In den ersten 7 Zeilen liegen jeweils die Buttons inkl. einem Rollover Effekt.

Ich möchte jedoch zusätzlich noch in der 11 Zeile eine Textinfo angezeigt bekommen. z.B. mouseover beim button 1 unten text "artists", mouseover button 2 unten text "contact", usw.

http://trycrack-records.de/testarea/web-content/index.html

  1. Warum hat dein Posting die Kategorie Java? Ich sehe nirgens ein Java-Applet.
    Deine Frage mach auch eher Sinn, wenn du dich auf JavaScript beziehst, was etwas völlig anderes ist.

    Ich möchte jedoch zusätzlich noch in der 11 Zeile eine Textinfo angezeigt bekommen. z.B. mouseover beim button 1 unten text "artists", mouseover button 2 unten text "contact", usw.

    Mein Vorschlag wäre, dem Textinfo-<td>-Element eine ID zu geben, z.B.
    id="textinfo"
    dann kannst du den Text so ändern:

    onmouseover="document.getElementById('textinfo').firstChild.nodeValue='irgendein Info-Text';"
    onmouseout="document.getElementById('textinfo').firstChild.nodeValue='';"

    1. mit der Headline war ein Versehen !

      Wo füge ich die Zeilen den genau ein ?

      1. Hi,

        Wo füge ich die Zeilen den genau ein ?

        Du solltest besser fragen, wie Du den Code so änderst, daß überhaupt etwas auf der Seite zu sehen ist. Außer im IE dürfte sie in allen Brosern leer sein.

        freundliche Grüße
        Ingo

        1. ok nochmal,

          kann mir jemand sagen, wie ich oben angesprochenen Wunsch in meine Seite einfügen kann, dass es von den Standart Browsern angezeigt wird???

          Wenn ja, vielleicht auch wie und wo ich was schreiben muss???

          Danke und Gruss
          Christian

          1. ok nochmal,

            kann mir jemand sagen, wie ich oben angesprochenen Wunsch in meine Seite einfügen kann, dass es von den Standart Browsern angezeigt wird???

            Du willst beim Überfahren mit der Maus über eine Tabellenzelle einen Infotext in eine andere Tabellenzelle ausgeben. Richtig?
            Wenn nein, vergiss was ich geschrieben hab.
            Wenn ja, geht das unter anderem folgendermaßen:

            im "head" der HTML-Datei:

            <script type="text/javascript">
            function SetInfoText(text)
            {
              if(typeof text == 'string') document.getElementById('textinfo').firstChild.nodeValue=text;
              else document.getElementById('textinfo').firstChild.nodeValue='';
            }
            </script>

            Tabellenzelle, die mit der Maus überfahren wird:
            <td onmouseover="SetInfoText('Das ist der Info-Text')" onmouseout="SetInfoText()">Hallo</td>

            Tabellenzelle, in der der Text ausgegeben wird:
            <td id="textinfo">&nbsp;</td>

            getestet im IE, Firefox und Opera.

            1. da ich in sachen html,... ein absoluter laie bin - anbei der quellcode meiner seite mit dem script hoffentlich anrichtiger stelle eingefügt ????

              Ich möchte diesen Effekt mit dem Text sobald ich  über die Navigationbuttons bzw. Buttons in der jeweiligen Tabelle fahre!
              ______________________________________________________________
              <html xmlns="http://www.w3.org/1999/xhtml">

              <head>
              <script type="text/javascript">
              function SetInfoText(text)
              {
                if(typeof text == 'string') document.getElementById('textinfo').firstChild.nodeValue=text;
                else document.getElementById('textinfo').firstChild.nodeValue='';
              }
              </script>
                <meta http-equiv="content-type" content="text/html;charset=utf-8" />
                <meta name="generator" content="Adobe GoLive" />
                <title>trycrack-records</title>
                <link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
                <style type="text/css" media="screen"><!--
              .class { background-image: url(pictures/background.gif); }
              --></style>

              <csscriptdict import="import">
                 <script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script>
                </csscriptdict>
                <csactiondict>
                 <script type="text/javascript"><!--
              var preloadFlag = false;
              function preloadImages() {
               if (document.images) {
                pre_buttonartists_over = newImage('pictures/navi_folder/buttonartists_over.png');
                pre_buttonsounds_over = newImage('pictures/navi_folder/buttonsounds_over.png');
                pre_buttonlabel_over = newImage('pictures/navi_folder/buttonlabel_over.png');
                pre_buttonnewsletter_over = newImage('pictures/navi_folder/buttonnewsletter_over.png');
                pre_buttonforum_over = newImage('pictures/navi_folder/buttonforum_over.png');
                pre_buttonguestbook_over = newImage('pictures/navi_folder/buttonguestbook_over.png');
                pre_buttoncontact_over = newImage('pictures/navi_folder/buttoncontact_over.png');
                preloadFlag = true;
               }
              }

              // --></script>
                </csactiondict>
               </head>

              <body onload="preloadImages();" background="pictures/backgroundsite.gif">
                <div style="position:relative;width:800px;height:600px;background-image:url(pictures/background.gif);margin:auto;-adbe-g:m;">
                 <div style="position:absolute;top:235px;left:0px;width:82px;height:289px;">
                  <table width="82" border="0" cellspacing="2" cellpadding="0">
                   <tr>
                    <td align="center" valign="middle"><a onmouseover="changeImages('buttonartists','pictures/navi_folder/buttonartists_over.png');return true;" onmouseout="changeImages('buttonartists','pictures/navi_folder/buttonartists.png');return true" href="#"><img id="buttonartists" src="pictures/navi_folder/buttonartists.png" alt="artists" name="buttonartists" height="29" width="29" border="0" /></a> onmouseover="SetInfoText" onmouseout="SetInfoText()">Hallo</td>
                   </tr>
                   <tr>
                    <td align="center" valign="middle"><a onmouseover="changeImages('buttonsounds','pictures/navi_folder/buttonsounds_over.png');return true" onmouseout="changeImages('buttonsounds','pictures/navi_folder/buttonsounds.png');return true" href="#"><img id="buttonsounds" src="pictures/navi_folder/buttonsounds.png" alt="sounds" name="buttonsounds" height="29" width="29" border="0" /></a></td>

              </tr>
                   <tr>
                    <td align="center" valign="middle"><a onmouseover="changeImages('buttonlabel','pictures/navi_folder/buttonlabel_over.png');return true" onmouseout="changeImages('buttonlabel','pictures/navi_folder/buttonlabel.png');return true" href="#"><img id="buttonlabel" src="pictures/navi_folder/buttonlabel.png" alt="label" name="buttonlabel" height="29" width="29" border="0" /></a></td>
                   </tr>
                   <tr>
                    <td align="center" valign="middle"><a onmouseover="changeImages('buttonnewsletter','pictures/navi_folder/buttonnewsletter_over.png');return true" onmouseout="changeImages('buttonnewsletter','pictures/navi_folder/buttonnewsletter.png');return true" href="#"><img id="buttonnewsletter" src="pictures/navi_folder/buttonnewsletter.png" alt="news" name="buttonnewsletter" height="29" width="29" border="0" /></a></td>
                   </tr>
                   <tr>
                    <td align="center" valign="middle"><a onmouseover="changeImages('buttonforum','pictures/navi_folder/buttonforum_over.png');return true" onmouseout="changeImages('buttonforum','pictures/navi_folder/buttonforum.png');return true" href="#"><img id="buttonforum" src="pictures/navi_folder/buttonforum.png" alt="forum" name="buttonforum" height="29" width="29" border="0" /></a></td>

              </tr>
                   <tr>
                    <td align="center" valign="middle"><a onmouseover="changeImages('buttonguestbook','pictures/navi_folder/buttonguestbook_over.png');return true" onmouseout="changeImages('buttonguestbook','pictures/navi_folder/buttonguestbook.png');return true" href="#"><img id="buttonguestbook" src="pictures/navi_folder/buttonguestbook.png" alt="guest" name="buttonguestbook" height="29" width="29" border="0" /></a></td>
                   </tr>
                   <tr>
                    <td align="center" valign="middle"><a onmouseover="changeImages('buttoncontact','pictures/navi_folder/buttoncontact_over.png');return true" onmouseout="changeImages('buttoncontact','pictures/navi_folder/buttoncontact.png');return true" href="#"><img id="buttoncontact" src="pictures/navi_folder/buttoncontact.png" alt="contact" name="buttoncontact" height="29" width="29" border="0" /></a></td>
                   </tr>
                   <tr>
                    <td align="center" valign="middle"></td>

              </tr>
                   <tr>
                    <td align="center" valign="middle"></td>
                   </tr>
                   <tr>
                    <td align="center" valign="middle"></td>
                   </tr>
                   <tr>
                    <td align="center" valign="middle"></td>

              </tr>
                   <tr>
                    <td id="textinfo">&nbsp align="center" valign="middle"></td>
                   </tr>
                  </table>
                 </div>
                </div>
                <p></p>
               </body>

              </html>

              1. Ich möchte diesen Effekt mit dem Text sobald ich  über die Navigationbuttons bzw. Buttons in der jeweiligen Tabelle fahre!

                So müsste eine Tabellenzeile aussehen:
                ("DEIN_TEXT" müsstest du durch den Infotext ersetzen)

                <tr>
                <td align="center" valign="middle"><a onmouseover="changeImages('buttonartists','pictures/navi_folder/buttonartists_over.png');SetInfoText('DEIN_TEXT');return true;" onmouseout="changeImages('buttonartists','pictures/navi_folder/buttonartists.png');SetInfoText();return true;" href="#"><img id="buttonartists" src="pictures/navi_folder/buttonartists.png" alt="artists" name="buttonartists" height="29" width="29" border="0" /></a></td>
                </tr>

                So müsste die Zeile aussehen, in der der Text ausgegeben wird:
                <tr>
                  <td align="center" valign="middle" id="textinfo">&nbsp</td>
                </tr>

                Allerdings gehe ich davon aus, dass diese Tabellenspalte nur so breit wie die Buttons sein sollte, also zu schmal für den Info-Text.
                Wenn dem so ist, solltest du den Text wo anders ausgeben.
                Das Script gibt den Text immer in dem Element aus, das das Attribut id="textinfo" besitzt.

                1. genau so einen Effekt wollte ich! Vielen Dank!