Ingo Turski: bei "MouseOver" Ebene einblenden

Beitrag lesen

Hi,

Die Klimmzüge stammen von Silkes Original-Dreamweaver-Codierung; sowohl was das Tabellenlayout, als auch was die MouseOver-Effekte mit JavaScript angeht. Dreamweaver will da eben auch die Uralt-Browser wie Netscape 4.X und Internet-Explorer 4.X noch mitnehmen. Die sind gerade an öffentlichen Einrichtungen wie Hochschulen durchaus noch verbreitet

Ja und? Sonst wird doch auch eher - nicht zu unrecht - davon abgeraten, diese kryptischen Konstruktionen zu verwenden. Und Netscape 4 stellt meine CSS-Version bis auf die Zentrierung und die Rahmen um die Bilder (was man aber leicht ändern könnte) identisch dar. Natürlich ohne Hover-Effekte, aber das beeinträchtigt weder die Nutzbarkeit noch das zugrunde liegende Design.

Deshalb halte ich in Silkes Fall minimale Änderungen ohne Systemwechsel für die bessere Lösung.

Ich nicht, aus besagtem Grund und weil über die CSS-Lösung vermutlich mehr Besucher in den Genuß des hover-Effekts kommen als bei der Javascript-Lösung - nämlich all diejenigen, die Javascript deaktiviert haben!

Da ich gerade Zeit und Lust hatte, habe ich  Deine Seite mal vernünftig mit CCS umgesetzt. ;-)

Die Aussetzer (kurzzeitiges komplettes Verschwinden des Ursprungsbildes, bevor das neue eingeblendet wird) machen sich im IE am deutlichsten bemerkbar. Ich denke aber, dass sie auch dort nur damit zu tun haben, dass die Bilder auf deiner Seite von Silkes FH-Domain kommen. Auch das Zurückblenden des großen Farbbildes auf den schmalen Schwarzweißausschnitt sobald die Maus den schmalen Ursprungsbereich verlässt, ließe sich ja ebenfalls noch mit CSS regeln, wenn man hier ausschließlich mit Hintergrundbildern arbeiten würde.

Ich habe hier schon ganz bewußt img verwendet: aus Kompatibilitätsgründen (weil sie unproblematisch die Höhe des Links festlegen) und wegen des Alternativtextes.

Das kurzfristige Verschwinden der Bilder dürfte eigentlich nur beim ersten Laden des Hintergrundbildes passieren. Ich fand das vertretbar und in Hinblick auf die fast halbierte Ladezeit der Seite ohne diese Grafiken sogar sinnvoll. Natürlich könnte man die Grafiken auch onload mittels Javascript vorladen wie in Silkes Lösung.
Wie auch immer - da das offensichtlich stört, habe ich die Seite jetzt mal dahingehend geändert, daß die Hintergrundbilder a und nicht a:hover zugewiesen werden und somit direkt zur Verfügung stehen. Das Verschwinden sollte damit nicht mehr auftreten.

Wer also keine Rücksicht auf Kunden mit Uralt-Browsern nehmen muss oder der Barrierefreiheit eine höhere Priorität einräumt, sollte lieber deinem Beispiel folgen, WYSIWYG-Editoren meiden und sich mit CSS beschäftigen, da bin ich absolut d'accord.

Dem würde ich noch hinzufügen: ... oder wer Uralt-Browser berücksichtigen will und dies auch mit moderner Technik hinlänglich schafft.

freundliche Grüße
Ingo

0 48

bei "MouseOver" Ebene einblenden

silke
  • html
  1. 0
    Marc Reichelt
    • javascript
    1. 0
      Joachim
      1. 0
        Marc Reichelt
    2. 0
      silke
      1. 0
        Marc Reichelt
        1. 0
          Gernot Back
          1. 0
            Marc Reichelt
            1. 0
              Gernot Back
              1. 0
                silke
          2. 0
            silke
            1. 0
              Gernot Back
              1. 0
                silke
                1. 0

                  TOFU

                  Ashura
                  • zur info
                2. 0
                  Gernot Back
                  1. 0
                    Gernot Back
                    1. 0
                      silke
                      1. 0
                        Gernot Back
                        1. 0
                          silke
                          1. 0
                            Gernot Back
                            1. 0
                              silke
  2. 0
    XaraX
    1. 0
      silke
      1. 1
        Ingo Turski
        1. 0
          Gernot Back
          • css
          1. 0
            Ingo Turski
            1. 0

              & CSS: Nicht Entweder-Oder, sondern Sowohl-Als-Auch !

              Gernot Back
              • javascript
              1. 0
                Ingo Turski
                1. 0
                  Gernot Back
                  1. 0
                    Ingo Turski
                    1. 0

                      whatever:hover

                      Ashura
                      1. 0
                        Ingo Turski
                        1. 0
                          Ashura
                          1. 0
                            Ingo Turski
                            1. 0
                              Ashura
                    2. 0
                      Gernot Back
                      1. 0
                        Ingo Turski
                      2. 0
                        Ingo Turski
                        1. 0
                          Gernot Back
                          1. 0
                            Ingo Turski
                            1. 0
                              Gernot Back
                              1. 0
                                Ingo Turski
        2. 0
          Dada
          1. 0
            Ingo Turski
            1. 0
              Dada
              1. 0
                Ingo Turski
                1. 0
                  Dada
  3. 0
    Gernot Back