michaela: keine Wechselbuttonfunktion bei div-Tag mit Netscape

Hallo,

ich habe ein Problem:
Und zwar habe ich auf meiner Webseite eine Wechselbuttonfunktion mit Hilfe von Javascript realisiert.
Die Buttons sind mit Hilfe des div-Tags absolut positioniert:

<div id="Layer2" style="position:absolute; width:137px; height:20px; z-index:2; left: 158px; top: 0px">
<a href="#"
onMouseOver="Bildwechsel(1, highlight);"
onmouseout="Bildwechsel(1, normal)";
onclick="Leitbild()">

<img src="../../bilder/Leiste_unten/Leitbild2.gif" width=137 height=20 alt="" border="0">
</a>
</div>

Leider funktionieren die Wechselbuttons mit Netscape nicht. Wenn ich die div-Tags jedoch entferne und die Buttons einfach so darstelle, dann geht's.
Wie das jedoch so ist, die Buttons müssen absolut positioniert sein.

Hat jemand eine Idee für mich, wie dieses Problem gelöst werden kann.

Vielen Dank schon mal im voraus.

Gruss, Michaela

  1. Hallo!

    Das kann auch nicht gehen:

    onMouseOver ist nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
    <a> <area>

    Nachzulesen bei Selfhtml unter JavaScript und onMouseOver...

    Grüsse,
    Michael Weber

    Und zwar habe ich auf meiner Webseite eine Wechselbuttonfunktion
    mit Hilfe von Javascript realisiert.

    1. Oh, sorry, hab eben gesehen, dass ich mich verguckt habe.
      Du hast den onMouseOver ja im href...
      Dann sollte es eigentlich funktionieren.
      Bis auf den Strichpunkt den Du falsch gesetzt hast.
      Ich glaub bei der onMouseOut-Funktion war das.

      Grüsse,
      Michael Weber

      1. Hallo Michael,

        das mit dem Strichpunkt hatte ich überhaupt nicht gesehen. Das beweist mal wieder, das es immer gut ist, wenn sich ein Zweiter den Quelltext anschaut.
        Strichpunkt wurde richtig gesetzt, aber die Wechselbuttons funktionieren trotzdem nicht. Schade.

        Vielen Dank aber für den Tip, Michaela

        » Oh, sorry, hab eben gesehen, dass ich mich verguckt habe.

        Du hast den onMouseOver ja im href...
        Dann sollte es eigentlich funktionieren.
        Bis auf den Strichpunkt den Du falsch gesetzt hast.
        Ich glaub bei der onMouseOut-Funktion war das.

        Grüsse,
        Michael Weber

    2. Hallo!

      Das kann auch nicht gehen:

      onMouseOver ist nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
      <a> <area>

      onMouseOver wird auch im <a>-Tag verwendet und nicht im div-Tag. Siehe Quelltext in meiner Frage.

      Gruss, Michaela

  2. Grüssi!

    Hast du FAQ numero 10 schon gelesen?
    http://www.teamone.de/selfaktuell/forum/faq/forumsfaq_4.htm#a10

    Falls ja und es geht trotzdem nicht poste mal deine Javascript wechsel-Funktion!

    lg bernhard

    1. Hallo miteinander,

      Hast du FAQ numero 10 schon gelesen?
      http://www.teamone.de/selfaktuell/forum/faq/forumsfaq_4.htm#a10

      Falls ja und es geht trotzdem nicht poste mal deine Javascript wechsel-Funktion!

      ich nehme an, das ist mehr an Fall für http://www.teamone.de/selfhtml/sfausles/tsfa_tdb.htm#a5

      Viele Grüße Günter

    2. Grüssi!

      Hast du FAQ numero 10 schon gelesen?
      http://www.teamone.de/selfaktuell/forum/faq/forumsfaq_4.htm#a10

      Falls ja und es geht trotzdem nicht poste mal deine Javascript wechsel-Funktion!

      lg bernhard

      Hallo Bernhard,

      FAQ numero 10 hatte ich auch schon gelesen und auch schon getestet, ging aber auch nicht. Hier also meine kompletter Quellcode, vielleicht weißt Du ja weiter?
      Vielen Dank schon mal im voraus, Michaela

      <html>
      <head>
       <title>Unbenannt</title>
      </head>

      <script language="JavaScript">
      <!--
        normal = new Image();
        normal.src = "../../bilder/Leiste_unten/Leitbild2.gif"; /* erste Standard-Grafik */
        highlight = new Image();
        highlight.src = "../../bilder/Leiste_unten/Leitbild1.gif"; /* erste Highlight-Grafik */

      normal1 = new Image();
        normal1.src = "../../bilder/Leiste_unten/Team2.gif"; /* erste Standard-Grafik */
        highlight1 = new Image();
        highlight1.src = "../../bilder/Leiste_unten/Team1.gif"; /* erste Highlight-Grafik */

      normal2 = new Image();
        normal2.src = "../../bilder/Leiste_unten/Kooperationen2.gif"; /* erste Standard-Grafik */
        highlight2 = new Image();
        highlight2.src = "../../bilder/Leiste_unten/Kooperationen1.gif"; /* erste Highlight-Grafik */

      function Bildwechsel(Bildnr,Bildobjekt)
        {
         window.document.images[Bildnr].src = Bildobjekt.src;
        }

      //Funktionen um zwei Frames gleichzeitig zu fuellen
      function Leitbild()
      {
       parent.unter_nav.location="../Leitbild/nav_leitbild.htm";
       parent.unter_text.location="../Leitbild/leitbild.htm";
      }

      function Team()
      {
       parent.unter_nav.location="../Team/nav_team.htm";
       parent.unter_text.location="../Team/team.htm";
      }

      function Kooperation()
      {
       parent.unter_nav.location="../Kooperationen/nav_koop.htm";
       parent.unter_text.location="../Kooperationen/kooperationen.htm";
      }
      //-->
      </script>
      </head>

      <body bgcolor="#F9F8E3">

      <div id="Layer1" style="position:absolute; width:68px; height:15px; z-index:1; top: 0px; left: 10px">
      <img src="../../Bilder/Logo.gif" width="75" height="31"></div>

      <!--Navigationsleiste Anfang-->
      <div id="Layer2" style="position:absolute; width:119px; height:12px; z-index:2; left: 158px; top: 0px">
      <a href="#"
      onMouseOver="Bildwechsel(1, highlight);"
      onmouseout="Bildwechsel(1, normal)";
      onclick="Leitbild()">
      <img src="../../bilder/Unternehmen/Leiste_unten/Leitbild2.gif" width=137 height=20 alt="" border="0"></a>
      </div>

      <div id="Layer3" style="position:absolute; width:62px; height:8px; z-index:3; left: 294px; top: 0px">
      <a href="#"
      onMouseOver="Bildwechsel(2, highlight1);"
      onmouseout="Bildwechsel(2, normal1)";
      onclick="Team()">
      <img src="../../bilder/Unternehmen/Leiste_unten/Team2.gif" width=137 height=20 alt="" border="0"></a>
      </div>

      <div id="Layer4" style="position:absolute; width:90px; height:8px; z-index:4; left: 430px; top: 0px">
      <img src="../../bilder/Unternehmen/Leiste_unten/Anlaufstellen1.gif" width=137 height=20 alt="" border="0">
      </div>

      <div id="Layer5" style="position:absolute; width:114px; height:11px; z-index:5; left: 566px; top: 0px">
      <a href="#"
      onMouseOver="Bildwechsel(4, highlight2);"
      onmouseout="Bildwechsel(4, normal2)";
      onclick="Kooperation()">
      <img src="../../bilder/Unternehmen/Leiste_unten/Kooperationen2.gif" width=137 height=20 alt="" border="0"></a>
      </div>
      <!--Navigationsleiste Ende-->
      </html>

      1. Grüssi!

        FAQ numero 10 hatte ich auch schon gelesen und auch schon getestet, ging aber auch nicht. Hier also meine kompletter Quellcode, vielleicht weißt Du ja weiter?

        Wirklich? Bei mir gings nämlich so (Siehe auch Link von Günther)

        function Bildwechsel(Layer,Bild,Bildobjekt) {
           window.document.layers[Layer].document.images[Bild].src = Bildobjekt.src;
        }

        Ich übergebe auch noch den Namen des Layer, damit man mit document.layers['Layer1'] darauf zugreifen kann. Da netscape einen Layer als eigenes Document betrachtet, musst du für den Lyer wieder die document-Propertie verwenden für die images, quasi als Dokument im Dokument ;-)

        Ich habe übrigens dem Bild einen Namen gegeben, ist leichter zu handeln als mit Nummern.

        <div name="Layer2" style="position:absolute; width:119px; height:12px; z-index:2; left: 158px; top: 0px">
        <a href="#"
           onMouseOver="Bildwechsel('Layer2','Bild1', highlight);"
           onmouseout="Bildwechsel('Layer2','Bild1', normal)";
           onclick="Leitbild()">
        <img src="../../bilder/Unternehmen/Leiste_unten/Leitbild2.gif" name="Bild1" width=137 height=20 alt="" border="0"></a>
        </div>

        Hoffe es Funktioniert nun. Um es für den IE fit zu halten, brauchst du natürlich zwei Funktionen:

        if (document.all) { IE-Bildwechsel-Funktion }
        else if (document.layers) { NS-Bildwechsel-funktion }

        Wie es für NS6 geht weiss ich nicht ;-)

        lg bernhard

        1. Hallo Bernhard,

          hatte diese Möglickeit auch schon getestet. Jetzt habe ich auch noch Deinen Vorschlag übernommen den Bildern Namen zu geben. Und was soll ich schreiben. Es funktioniert immer noch nicht. Mein Quelltext ist jetzt genau so, wie Dein Beispiel. Vielleicht liegt es ja am Rechner oder am schlechten Wetter, wer weiß?

          Auf alle Fälle möchte ich mich für Deine Mühen bedanken. Ich habe jetzt keine Lust mehr und widme mich diesem Thema erst wieder am Montag.

          Ciao, Michaela

          1. Grüssi Michaela!

            hatte diese Möglickeit auch schon getestet. Jetzt habe ich auch noch Deinen Vorschlag übernommen den Bildern Namen zu geben. Und was soll ich schreiben. Es funktioniert immer noch nicht. Mein Quelltext ist jetzt genau so, wie Dein Beispiel. Vielleicht liegt es ja am Rechner oder am schlechten Wetter, wer weiß?

            Bei mir funktioniert es genau so. Ich habe dein Problem mal aufs nötigste reduziert. Kopiere das 1:1 und proiers aus. Wenns funktioniert, passe danach dein Scirpt diesem Muster an:

            <html>
            <head>
             <title>Unbenannt</title>
            </head>
            <script language="JavaScript">
            normal = new Image();
            normal.src = "http://www.teamone.de/selfaktuell/src/xweb.gif";

            highlight = new Image();
            highlight.src = "http://www.freedomforlinks.de/Media/ribonani.gif";

            function Bildwechsel(Layer,Bild,Bildobjekt) {
               window.document.layers[Layer].document.images[Bild].src = Bildobjekt.src;
            }
            </script>
            </head>
            <body>

            <div id="Layer1" style="position:absolute; width:68px; height:15px; z-index:1; top: 0px; left: 10px">
            <a href="#"
               onMouseOver="Bildwechsel('Layer1','Bild1', highlight);"
               onmouseout="Bildwechsel('Layer1','Bild1', normal);">
            <img src="http://www.teamone.de/selfaktuell/src/xweb.gif" name="Bild1" border="0" alt="SELFHTML">
            </a>
            </div>

            </body>
            </html>

            -- lauft einwandfrei auf meinem NS4.77 :-) -- wenn man allerdings den style="" weglässt klappts aus unerfindlichen Gründen nimmer.

            Ansonsten poste doch mal deine Javascript-errors die der Netsi ausspuckt!

            lg bernhard

            1. Hallo Bernhard,

              vielen Dank für Deine Hilfe, wie Du siehst, konnte ich doch nicht bis Montag warten.

              Habe untenstehenden Quelltext übernommen, jedoch die Grafiken ausgetauscht, geht auch nicht. Javascript-Errors gibt's keine. Jetzt vermute ich mal, daß es vielleicht am Netzwerk liegt. Komme mit meinem Netscape Browser nur auf den Intranetserver, nicht aber ins Internet. Da kommt dann so eine dusselige Proxy-Fehlermeldung. Auf was für einen Server hast Du die Webseite liegen? Obwohl Javascript wird doch Clientseitig ausgeführt. Aber irgendetwas muß doch sein.

              Wäre nett, wenn ich eine Antwort von Dir erhalte.

              Ciao, Michaela

              Bei mir funktioniert es genau so. Ich habe dein Problem mal aufs nötigste reduziert. Kopiere das 1:1 und proiers aus. Wenns funktioniert, passe danach dein Scirpt diesem Muster an:

              <html>
              <head>
              <title>Unbenannt</title>
              </head>
              <script language="JavaScript">
              normal = new Image();
              normal.src = "http://www.teamone.de/selfaktuell/src/xweb.gif";

              highlight = new Image();
              highlight.src = "http://www.freedomforlinks.de/Media/ribonani.gif";

              function Bildwechsel(Layer,Bild,Bildobjekt) {
                 window.document.layers[Layer].document.images[Bild].src = Bildobjekt.src;
              }
              </script>
              </head>
              <body>

              <div id="Layer1" style="position:absolute; width:68px; height:15px; z-index:1; top: 0px; left: 10px">
              <a href="#"
                 onMouseOver="Bildwechsel('Layer1','Bild1', highlight);"
                 onmouseout="Bildwechsel('Layer1','Bild1', normal);">
              <img src="http://www.teamone.de/selfaktuell/src/xweb.gif" name="Bild1" border="0" alt="SELFHTML">
              </a>
              </div>

              </body>
              </html>

              -- lauft einwandfrei auf meinem NS4.77 :-) -- wenn man allerdings den style="" weglässt klappts aus unerfindlichen Gründen nimmer.

              Ansonsten poste doch mal deine Javascript-errors die der Netsi ausspuckt!

              lg bernhard

              1. Grüssi Michaela,

                vielen Dank für Deine Hilfe, wie Du siehst, konnte ich doch nicht bis Montag warten.

                Fleiss wird belohnt! Das denke ich mir zumindest jedesmal wenn ich wiedermal 10 Std an einem Problem hänge und nicht weiterkomme ;-)

                Habe untenstehenden Quelltext übernommen, jedoch die Grafiken ausgetauscht, geht auch nicht. Javascript-Errors gibt's keine.

                hmmmm ... was geschieht denn? Ändert sich das bild einfach nicht, kommt ein Bild-nicht-gefunden-Rahmen, ...? Hats vorm einfügen der neuen Bilder geklappt?

                Jetzt vermute ich mal, daß es vielleicht am Netzwerk liegt. Komme mit meinem Netscape Browser nur auf den Intranetserver, nicht aber ins Internet. Da kommt dann so eine dusselige Proxy-Fehlermeldung. Auf was für einen Server hast Du die Webseite liegen? Obwohl Javascript wird doch Clientseitig ausgeführt. Aber irgendetwas muß doch sein.

                Server ist wurscht! Du kannst die Seite mit Datei->öffnen aufmachen, sie muss auf keinem Server liegen. Du kannst den Server als Fehlerquelle getrost ausschliessen. Kannst den Proxy ja mal ausschalten. Das Javascript läuft nur clientseitig ab.

                Wäre nett, wenn ich eine Antwort von Dir erhalte.

                http://www.unet.univie.ac.at/~a9827041/michaela.html surf hin. Es ist nochmal die Seite, die ich gepostet habe.

                Ansonsten müsstest du irgendwie versuchen, deine Seite (inkl. Bilder) online zu stellen. Hast du eine Möglichkeit dazu? Oder poste mal die komplette Seite (mit den bereits umgesetzten (!) Änderungsvorschlägen aus den Postings hier).

                lg bernhard

                1. Hallo Bernhard,

                  ich habe herausbekommen, warum die Wechselbuttons nicht funktionieren. Es liegt an der Pfadangabe.

                  So funktioniert es nicht!!!
                  normal = new Image();
                  normal.src = "../../bilder/Leiste_unten/Leitbild2.gif";
                  highlight = new Image();
                  highlight.src = "../../bilder/Leiste_unten/Leitbild1.gif";

                  Wenn ich die Grafiken in dasselbe Verzeichnis ablege, wo auch die HTML-Seite gespeichert ist, funktionierts jedoch.

                  Jetzt darf ich also meine gesamte Verzeichnisstruktur ändern.

                  Ciao, Michaela

                  1. Grüssi,

                    ich habe herausbekommen, warum die Wechselbuttons nicht funktionieren. Es liegt an der Pfadangabe.

                    So funktioniert es nicht!!!
                    normal.src = "../../bilder/Leiste_unten/Leitbild2.gif";
                    highlight.src = "../../bilder/Leiste_unten/Leitbild1.gif";

                    hmmm, wundert mich aber stark! Bindest du die Javascript-Datei extern ein?

                    Tip: Ich referenziere alles immer vom root-Verzeichnis aus: src="/path/to/bild.gif" - damit hatte ich noch nie Probleme, denn es ist immer eindeutig wo die Bilder/Dateien zu finden sind, und man muss bei Änderungen in der Dateistruktur nicht so genau aufpassen vielviele Verzeichnisebenen höher dieses file denn nun liegt ;-)

                    lg bernhard

                    1. Hallo Bernhard,

                      Deine Frage: "Bindest du die Javascript-Datei extern ein?" muß ich mit nein beantworten. Aber hätte es daran liegen können?

                      Nach dem ganzen Ummodellieren für den Netscape funktionierte natürlich was anderes nicht mehr im IE. Hatte aber mit der Problematik überhaupt nichts zu tun. Da kann man echt wahnsinnig werden.

                      Auf alle Fälle sind die Deiten jetzt fertig und funktionieren sowohl im IE als im Netscape.

                      Was lange währt wird endlich gut!!!!

                      Ciao, Michaela

                      1. Grüssi Michaela,

                        Deine Frage: "Bindest du die Javascript-Datei extern ein?" muß ich mit nein beantworten. Aber hätte es daran liegen können?

                        Ja, denn wenn du deine Bilder aus einem relativen Pfad lädst, dann wird glaube ich der Pfad ausgehend vom Javascript genommen:

                        normal.src = "../../bilder/Leiste_unten/Leitbild2.gif";
                        highlight.src = "../../bilder/Leiste_unten/Leitbild1.gif";

                        lg bernhard;

  3. Hallo nochmal!

    Ich sehe auch gerade, dass Du dem IMG keinen Namen gegeben hast.
    Wie sieht denn Deine JavaScript-Funktion aus die den Bildwechsel hervorruft?
    Am besten ist es wohl Du postest den ganzen Quelltext... ;o)

    Grüsse,
    Michael Weber