Flo: Rollover Images mit NS und IE (zum letzten Mal!)

Hallo...

zum x-ten Mal komme ich hier mit dem gleichen Problem an. Vielen Dank an alle, die sich bisher bemüht haben!

Ich habe das Problem inzwischen eingeengt: Es liegt definitiv an den Imagemaps, die ich auf meiner Seite folgendermassen definiert habe:
z.B.
<map name="produktMap">
  <area shape="rect" coords="0,286,121,309" href="Inhalte/JumpToCE.htm">
  <area shape="rect" coords="0,267,122,285" href="Inhalte/JumpToCBVerfahren.htm">
  <area shape="rect" coords="0,247,122,266" href="Inhalte/JumpToGSZeichen.htm">
  <area shape="rect" coords="0,227,123,246" href="Inhalte/JumpToTUVMark.htm">
  <area shape="rect" coords="0,207,124,227" href="Inhalte/JumpToPruefzeichen.htm">
  <area shape="rect" coords="0,189,124,206" href="Inhalte/JumpToMaschinenRL.htm">
  <area shape="rect" coords="0,168,125,188" href="Inhalte/JumpToNiederspannungsRL.htm">
  <area shape="rect" coords="0,147,124,167" href="Inhalte/JumpToUmweltpruef.htm">
  <area shape="rect" coords="0,128,124,147" href="Inhalte/JumpToWareninsp.htm">
  <area shape="rect" coords="0,108,125,128" href="Inhalte/JumpToErgonomiep.htm">
  <area shape="rect" coords="0,76,125,108" href="Inhalte/JumpToEmv.htm">
  <area shape="rect" coords="0,44,125,72" href="Inhalte/JumpToProdukte.htm">
</map>

Die Tabelle mit den Rollover-Images sieht dann so aus:
<tr>
    <td width="20" height="7" valign="top"></td>
    <td width="1" height="7" valign="top"></td>
    <td width="95" height="7" valign="top"></td>
    <td width="91" height="388" rowspan="6" valign="top"><a href="#" onMouseOver="Bildwechsel(0,on1)" onMouseOut="Bildwechsel(0,off1)"><img name="about" border="0" src="Bilder/rollovers/aboutoff.gif" width="90" height="388" usemap = "#aboutMap"></a></td>
    <td width="127" height="388" rowspan="6" valign="top"><a href="#" onMouseOver="Bildwechsel(1,on2)" onMouseOut="Bildwechsel(1,off2)"><img name="branchenRoll" border="0" src="Bilder/rollovers/branchenoff.gif" width="126" height="388" usemap = "#branchenMap"></a></td>
    <td width="127" height="388" rowspan="6" valign="top"><a href="#" onMouseOver="Bildwechsel(2,on3)" onMouseOut="Bildwechsel(2,off3)"><img name="Produkt" border="0" src="Bilder/rollovers/produktoff.gif" width="126" height="388" usemap = "#produktMap"></a></td>
    <td width="126" height="388" rowspan="6" valign="top"><a href="#" onMouseOver="Bildwechsel(3,on4)" onMouseOut="Bildwechsel(3,off4)"><img name="management" border="0" src="Bilder/rollovers/systemoff.gif" width="126" height="388" usemap = "#systemMap"></a></td>
    <td width="62" height="388" rowspan="6" valign="top"><a href="#" onMouseOver="Bildwechsel(4,on5)" onMouseOut="Bildwechsel(4,off5)"><img name="news" border="0" src="Bilder/rollovers/newsoff.gif" width="84" height="388" usemap = "#newsMap"></a></td>
    <td width="209" height="388" rowspan="6" valign="top"><a href="#" onMouseOver="Bildwechsel(5,on6)" onMouseOut="Bildwechsel(5,off6)"><img name="service" border="0" src="Bilder/rollovers/serviceoff.gif" width="110" height="388" usemap = "#serviceMap"></a></td>
  </tr>

Wenn ich das ganze mit dem IE5 anschaue, gibt es keinerlei Probleme. Mit dem IE4 flackern die Bilder beim drüberfahren und mit dem NS wechseln sie nur, wenn ich ganz am pberen oder unteren Rand entlangfahre.

Wenn ich die usemap="#xyz"-Anweisungen rausnehme, klappt alles tadellos.

Bitte rafft euch noch mal auf, mir zu helfen...

Flo

  1. Ich vergass: Als Funktion zum Umschalten habe ich die SelfHTML-Variante gewählt:

    <SCRIPT language=JavaScript>
    <!--
    off1 = new Image();
    off1.src = "Bilder/rollovers/aboutoff.gif";
    on1 = new Image();
    on1.src = "Bilder/rollovers/abouton.gif";

    off2 = new Image();
    off2.src = "Bilder/rollovers/branchenoff.gif";
    on2 = new Image();
    on2.src = "Bilder/rollovers/branchenon.gif";

    off3 = new Image();
    off3.src = "Bilder/rollovers/produktoff.gif";
    on3 = new Image();
    on3.src = "Bilder/rollovers/produkton.gif";

    off4 = new Image();
    off4.src = "Bilder/rollovers/systemoff.gif";
    on4 = new Image();
    on4.src = "Bilder/rollovers/systemon.gif";

    off5 = new Image();
    off5.src = "Bilder/rollovers/newsoff.gif";
    on5 = new Image();
    on5.src = "Bilder/rollovers/newson.gif";

    off6 = new Image();
    off6.src = "Bilder/rollovers/serviceoff.gif";
    on6 = new Image();
    on6.src = "Bilder/rollovers/serviceon.gif";

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

    //-->
    </SCRIPT>

    1. Hallo Flo,

      meine Eltern pflegten zu sagen 'DBD,DHKP', jedenfalls bezogen auf mich.

      Unten in der Tabelle hast Du 6 Bilder nebeneinander angeordnet, jedes
      388 Pixel hoch, und jeweils unterschiedlich breit.
      Das ist ja ein ganzes Navigationsbalkenfeld. Soll das so sein?

      Den von Dir beschriebenen Fehler erklärt das aber erstmal noch nicht.

      Was aber sonderbar ist, daß Du nur ein Satz TRs definiert hast,
      in jedes Feld aber rowspan="6" reinschreibst.
      Vielleicht stolpert Dein Netsie über diese Verschachtelung.
      Wenn er die 388 Pixel durch 6 Teilt weil er 6 Zellen in eine
      zu quetschen versucht und Deine MAP entsprechend staucht, dann bleibt
      in der Höhe ja tatsächlich nicht mehr so sonderlich viel übrig.
      Beobachtet hatte ich das so noch nicht, aber schon, daß er öfters
      ein soderbares Verhalten an den Tag legt wenn ich Tabellen unsauber
      geschrieben hatte.

      Klaus

  2. Hallo Flo,

    an Deinen Koordinaten kann ich nichts erschreckendes
    finden. Deine Rechtecke fangen immer ganz links an
    und hören mehr oder minder rechts auf (121..125).
    Hab' sie auch mal von oben nach unten sortiert.
    Einige überlappen sich um ein Bit, damit hatte
    ich aber noch nie Schwierigkeiten.
    Hab' mir auch mal eine Testseite zusammengepasted,
    sieht auf meinem NC 4.5 auch irgendwie plausibel aus.
    Wenn ich das Feld mit der Maus abtaste, dann gibt es
    einen Bereich in dem die Statuszeile Deine Ziele
    nacheinander anzeigt (von unten nach oben).

    [links,oben,rechts,unten]
    0, 44,125, 72
    0, 76,125,108
    0,108,125,128
    0,128,124,147
    0,147,124,167
    0,168,125,188
    0,189,124,206
    0,207,124,227
    0,227,123,246
    0,247,122,266
    0,267,122,285
    0,286,121,309

    Wenn ich die usemap="#xyz"-Anweisungen rausnehme, klappt alles tadellos.

    Das glaube ich nicht so recht. Wie sollte das funktionieren?
    Als einziges Ziel dürfte ja nur noch "#" existieren.
    Daß der Pfeil im ganzen Bildfeld zur Hand wird ist allerdings
    klar. Es kann höchstens sein, daß bei der Parameterübergabe (0,1,...)
    irgendwie hintenrum ein Bezug auf diese Bandwurmzahlen stattfindet.
    Aber Deine Sprungziele stehen doch in der MAP und sonst kann ich sie
    nirgends finden.

    (zum letzten Mal!)

    Das glaube ich Dir auch nicht. :-)

    Klaus

    1. Wenn ich die usemap="#xyz"-Anweisungen rausnehme, klappt alles tadellos.

      Das glaube ich nicht so recht. Wie sollte das funktionieren?
      Als einziges Ziel dürfte ja nur noch "#" existieren.

      Damit meinte ich, dass die Bilder dann tadellos auf und zu klappen.

      Schau doch mal auf die Seite:
      http://209.67.233.27/tuvgermany/home.htm

      1. Hallo Flo,

        Schau doch mal auf die Seite:
        http://209.67.233.27/tuvgermany/home.htm

        ja, da klappt so wirklich nicht allzuviel.
        Kapiere aber nun was das mit den 6 Spalten auf sich hat.
        Ich muß da noch etwas rumgrübeln.

        Klaus

        1. Hallo Flo,

          ja, da klappt so wirklich nicht allzuviel.

          hab' vorhin noch etwas auf Deiner (Home)Seite rumgeschmökert.

          Da ist ja wohl noch irgendwie ein Java-Applet beteiligt!

          Wenn ich Java aktiviere verhält sich das Ganze etwas
          unterschiedlich, aber immernoch nicht so wie ich das
          erwarten würde. Einige Rubriken klappen dann manchmal
          auf und dann auch wieder nicht, kapiert hab' ich das
          noch nicht. Irgendwie unsystematisch.

          Was soll das Applet bewirken, außer einem dynamischen Text links?

          Klaus

          1. Da ist ja wohl noch irgendwie ein Java-Applet beteiligt!

            Was soll das Applet bewirken, außer einem dynamischen Text links?

            Das Applet soll nicht mehr bewirken als genau das. Es soll die News scrollend darstellen. Ich habe es auch schon probiert, indem ich das Applet rausgeschmissen habe, aber da geht es immer noch nicht.
            Das einzige was wirkt ist die usemap="#..." rauszunehmen, dann klappt das Umschalten super, nur ist die Seite dann ziemlich sinnlos.

            Flo

            1. Hallo Flo,

              so gaaanz laaangsam scheint bei mir ein Groschen zu fallen.

              Ich hatte mich dauernd selbst ins Boxhorn gejagt mit Deiner
              Bemerkung, das Rollover funktioniere nur an der oberen
              und unteren 'Kante'. Ich hatte mir etwas pixelhohes darunter
              vorgestellt, konnte es aber nicht nachvollziehen.
              Tatsächlich funktioniert es oben im gesamten Bereich der
              Bilder und unten auch in einem unterschiedlich hohen Bereich.
              Wichtig war auch Deine Bemerkung, das Aufklappen funktio-
              niere wenn Du die MAPs rausnimmst.
              Die MAPs funktionieren nach meinen Beobachtungen ja auch
              richtig.

              Ich hab' gerade nicht die Zeit meinen Verdacht zu verifi-
              zieren, es scheint mir aber folgendes zu sein:
              Im Gegensatz zu den IEs scheinen MAPs bei den Netsies
              die darunterliegenden IMGs samt ihrer Events zu 'ver-
              bergen'. Die Rollovers funktionieren überall dort wo
              in den MAPs keine 'aktiven' Bereiche definiert sind.
              In den MAPs selbst sind bei Dir keine Events definiert.

              Dieser Unterschied zwischen den Browsern war mir bisher
              nicht bekannt. Vielleicht kannst Du das noch verifizieren.

              Klaus

              1. Hallo Klaus und Flo!

                Bemerkung, das Rollover funktioniere nur an der oberen
                und unteren 'Kante'. Ich hatte mir etwas pixelhohes darunter
                vorgestellt,

                Eben, ich auch!

                Im Gegensatz zu den IEs scheinen MAPs bei den Netsies
                die darunterliegenden IMGs samt ihrer Events zu 'ver-
                bergen'.

                Es geht hier nicht um die IMGs, sondern um die Links. In dem MAP sind ja schliesslich auch welche enthalten. So koennte ich mir vorstellen, dass beim OnMouseOver ueber einem MAP-Link automatisch ein OnMouseOut fuer den A-Link ausgefuehrt wird. Da aber die Mausposition eindeutig ueber dem IMG und damit dem A-Link ist, kommt gleich wieder ein OnMouseOver fuer das A-Tag. Daraus folgt: Es flackert im IE4.

                Beim IE5 haben die Entwickler wohl die Annahme, dass ein MouseOver niemals gleichzeitig ueber zwei Links sein kann, revidiert. (Diese Annahme liegt ja vielleicht dem automatisch generierten OnMouseOut beim IE4 zugrunde. Immerhin waere sie insofern gerechtfertigt, dass verschachtelte A-Tags, also <A HREF="..."><A ...> ... </A></A> in HTML nicht erlaubt sind.)

                Der NS4 denkt nun so aehnlich, wie der IE4: Ein OnMouseOver ueber einem Link (einem MAP-Link) muss zwangslaeufig ein OnMouseOut fuer einen anderen Link (dem A-Link) zur Folge haben (bzw. voraussetzen, d.h. das OnMouseOut geschieht zeitlich eher als das OnMouseOver). Im Gegensatz zum IE generiert er aber nicht staendig neue OnMouseOvers fuer den A-Link, da der jeweils ueberstrichene MAP-Link diesen ja schliesslich verdeckt. Oder vielleicht generiert er auch welche, ist aber so implementiert, dass sich die straight aufeinanderfolgend Overs und Outs aufheben und keine der Routine ausgefuehrt wird.

                Auf jeden Fall ist es irgendwie davon abhaengig, wie die (browser-internen!) Events abgehandled werden und auch, in welcher Reihenfolge sie auftreten. Und das vorzuschreiben kann man nun wirklich von keiner W3C-Spec der Welt verlangen.

                Ach ja, nur der Vollstaendigkeit halber: ;-)
                <STRONG INTENSITY="highly emphasized">
                    Das sind selbstverstaendlich alles nur Vermutungen! Ich war schliesslich nicht dabei, als die Programmierer ihre Browser entwickelt haben!
                </STRONG>

                Calocybe

                1. Ach ja, nur der Vollstaendigkeit halber: ;-)
                  <STRONG INTENSITY="highly emphasized">
                      Das sind selbstverstaendlich alles nur Vermutungen! Ich war schliesslich nicht dabei, als die Programmierer ihre Browser entwickelt haben!
                  </STRONG>

                  Das waren glaub ich ganz zutreffende Vermutungen!
                  Ich habe jetzt die onMouseover-Befehle in die Imagemap integriert und es funktioniert!!!

                  Vielen Dank für eure Hilfe! Wenn es euch interessiert, schaut doch mal rein.

                  http://209.67.233.27/tuvgermany/home.htm

                  1. Hallo Flo,

                    au weia, da hat aber einer den JS-Hosenboden gewetzt.
                    Der Navigationsbereich arbeitet jetzt prima und sauber.
                    Reaktionen gibt es nur in den aktiven Bereichen. Gut.
                    Manchmal blieben zwei oder mehr Menüs stehen, das kommt
                    aber nach einigen Bewegungen wieder in Titt.
                    Das hängt irgendwie mit der Geschwindigkeit der
                    Mausbewegungen zusammen.
                    Vielleicht sollte das Aufklappen eines Menüs alle anderen
                    automatisch zuklappen.
                    Das war aber auch eine schwere Geburt!

                    Wenn ich JAVA aktiviere taucht links zwischen News
                    und Kontakte ein weißes Feld auf in dem manchmal unten
                    eine angeschnittene Zahl zu stehen scheint, mehr nicht.
                    Ich hatte dabei aber auch mehrfach Besuch von Dr Watson.

                    Zwischen Kontakt und Site Map ist bei mir eine Lücke,
                    zwischen Site Map und Copyright jedoch nicht.

                    Klaus

                    1. Manchmal blieben zwei oder mehr Menüs stehen, das kommt
                      aber nach einigen Bewegungen wieder in Titt.
                      Das hängt irgendwie mit der Geschwindigkeit der
                      Mausbewegungen zusammen.
                      Vielleicht sollte das Aufklappen eines Menüs alle anderen
                      automatisch zuklappen.

                      Das tu ich mir jetzt nicht mehr an...nach 4 Monaten rumärgern mit dem Sch...

                      Wenn ich JAVA aktiviere taucht links zwischen News
                      und Kontakte ein weißes Feld auf in dem manchmal unten
                      eine angeschnittene Zahl zu stehen scheint, mehr nicht.

                      Eigentlich sollte da ein Applet die News abspielen.
                      <?>Ging eingentlich bisher bei jedem </?>

                      Ich hatte dabei aber auch mehrfach Besuch von Dr Watson.

                      Wie jetzt???

                      Zwischen Kontakt und Site Map ist bei mir eine Lücke,
                      zwischen Site Map und Copyright jedoch nicht.

                      Das soll so sein! <????????> Mein Boss WILL diese Lücke...irgendwas Marketingmässiges </????????>

                      Nochmals danke für die Hilfe.

                      Flo

                2. Hallo Calocybe,

                  Das sind selbstverstaendlich alles nur Vermutungen!

                  klar sind es das, aber, mit ein klein wenig Zeit ließe
                  sich schon herausbekommen ob das Verhalten durch ein-
                  fügen von onMouseovers und onMouseouts in die AREAs der
                  MAPs plausibl wird.

                  Das flackern im IE4 kann ich für mich nicht plausibel
                  erklären, es kann durchaus so sein wie Du es beschreibst.

                  Vielleicht probiert Flo das mal etwa in diesem Sinne aus
                  und berichtet darüber.

                  So gaaanz überzeugen tut mich das Konzept nicht.
                  Es irritiert mich schon, daß ich durch horizontale
                  Bewegungen der Maus irgendwo auf der Seite teilweise
                  (ganz woanders) etwas bewirke. Ich persönlich würde
                  schon versuchen das Geklapper nur über den schwarzen
                  Balken auszulösen. Das macht das ohnehin schwer über-
                  schaubare Script aber wohl noch krypischer.

                  Flo verwendet neurdings die indizierte Referenzierung
                  der IMGs. Das ist zwar zunächst einfacher und überschau-
                  barer. Zur besseren Pflege, des Konstruktes würde ich
                  hier schon zu einer benamsten Referenzierung tendieren.

                  Klaus