Opera 7 - Anzeigefehler bei Hintergrundwechsel mit OnMouseOver

[Christian Kuhlmann]

Ich habe eine Menütabelle mit Bildwechsel bei OnMouseOver mittels JavaScript aufgebaut. Diese wird mit Opera 6.05 und IE 5.X / 6 auch korrekt angezeigt. Opera 7.10 und 7.03(de) hinterlassen beim Bildwechsel jedoch 'Relikte', vor allem, wenn man die Maus schneller über die Zellen bewegt. Um den Fehler einzugrenzen habe ich einmal folgendes Beispiel verfasst:
http://cnk.gmxhome.de/test/test.htm
Es wäre nett, wenn mir jemand sagen könnte, ob es an meinem Bildwechsel liegt oder ein Problem von Opera 7 ist. Das selbe Problem ist mir auch schon auf anderen Seiten aufgefallen.

MfG
  Christian

[Christian]

Hi,

ich weiß jetzt nicht genau, was das Problem ist. Was meinst du mit "hinterlässt" Relikte ???

Jedenfalls arbeitet der MSIE 6 auch nicht richtig!
Er macht immer weißen hintergrund zwischen den beiden Hintergründen, d.h.
er lädt erst den Hintergrund!

Hab mir mal deine JS-Datei angeschaut:

function hi(elid) {
        if(DOM || MS) {
            getElem("id",elid,null).style.backgroundImage = 'url(bg.gif)';
        } else if(NS) {
            getElem("id",elid,null).backgroundImage = 'url(bg.gif)';

// das kennt Netscape 4 nicht, genauso wenig wie onmouseover im <td>-tag

}
      }

bg.gif solltest du erstmal preloaden:

var img = new Image();
img.src = "bg.gif";

Dann ist mir aufgefallen, das die richtige Datei "bg.GIF" heißt, viellecht macht das auch noch Probleme.

Gruß
Christian

[Christian Kuhlmann]

ich weiß jetzt nicht genau, was das Problem ist. Was meinst du mit "hinterlässt" Relikte ???

Hallo.
Ich meine damit, dass manchmal ein Teil des hervorgehobenen Hintergrunds verbleibt, wenn man die Zelle verlässt.

Jedenfalls arbeitet der MSIE 6 auch nicht richtig!
Er macht immer weißen hintergrund zwischen den beiden Hintergründen, d.h.
er lädt erst den Hintergrund!

Lag an dem falschen Dateiendungen. Ich hatte das Beispiel nur lokal ausprobiert. Windows sieht das mit Groß-/Kleinschreibung ja nicht so eng

// das kennt Netscape 4 nicht, genauso wenig wie onmouseover im <td>-tag

Danke für den Tipp. Hab' im Moment keine 4er installiert. Der 7er macht das keine Probleme.

bg.gif solltest du erstmal preloaden:

var img = new Image();
img.src = "bg.gif";

Dann ist mir aufgefallen, das die richtige Datei "bg.GIF" heißt, vielleicht macht das auch noch Probleme.

Ich hab' sicherheitshalber das ganze noch mal mit OP7 getestet. Auch mit den veränderten Dateinamen bleibt das gleiche Phenomen.
Das mit dem Preloaden hilft vielleicht etwas die Zeit bis das Bild geladen ist zu verkürzen (bzw. das Bild schon vorher zu laden). Der Anzeigefehler bleibt aber.
   MfG
   Christian

[Christian]

Hi,

Der Anzeigefehler bleibt aber.

Sorry, dann weiß ich auch nicht weiter!

Evtl statt backroundImage auch mal background versuchen, oder nur den Dateiname anzugeben (ohne url()).

Christian

[Christian Kulmann]

Evtl statt backroundImage auch mal background versuchen, oder nur den Dateiname anzugeben (ohne url()).

Hallo,
Ohne url() funktioniert gar nichts mehr. Ich glaub ich versuch es mal in ein paar Opera-Spezifischen Foren. Vielleicht hat da schon jemand ein ähnliches Problem gehabt und weiß Rat. Trotzdem vielen Dank.
   Christian

[Masin Al-Dujaili]

Hallo Christian,

als eingefleischter Opera-User muß ich bislang eingestehen, daß es
wohl an Opera liegen mag - bislang konnte ich den Fehler nicht
eingrenzen können.

Unabhängig davon: URL-Parameter von background-image gehören in
Anführungszeichen:
background-image: ("nobg.gif");

Vielleicht kann man sie auch weglassen, keine Ahnung, sicherer ist es
aber allemal.

Als nächstes habe ich mal probiert margin und padding zu setzen, was
aber auch keine Besserung brachte.

Ich bin echt ratlos. Habe sogar mal den beiden Grafiken einen roten
respektive gelben Rand verpaßt, konnte dabei aber nur erkennen, daß
Opera das obere Viertel der Hintergrundgrafik nicht mehr herstellt,
wenn man das Feld nach unten hin verläßt, so wie er dieses Viertel
gar nicht erst anzeigt, wenn man seitlich ein Feld betritt. :(

Übrigens kannst Du mittels CSS auf mouseover verzichten: Stichwort
hover. Aber auch nur, wenn Du nur Hintergünde austauschen möchtest.

Anhang: Überarbeiteter Quelltext

[Christian Kuhlmann]

als eingefleischter Opera-User muß ich bislang eingestehen, daß es
wohl an Opera liegen mag - bislang konnte ich den Fehler nicht
eingrenzen können.

Übrigens kannst Du mittels CSS auf mouseover verzichten: Stichwort
hover. Aber auch nur, wenn Du nur Hintergünde austauschen möchtest.

da das ganze ein Menü mit JavaScript werden sollte wollte ich das austauhschen der Hintergründe auch von einem Script erledigen, da ich noch am Überlegen bin, ob ich die Hintergründe je nach Menüpunkt ändere, so dass ich keine 'festen' Klassen benutzen kann.
Außerdem interpretiert OP6.05 :hover nicht.

Ich bin eigentlich auch ein Opera-Fan. Im Moment ziehe ich die 6.05er allerdings der 7er noch bei Weitem vor. es ist nicht das erste Mal, dass Opera 7 nicht das tut, was man erwarten könnte. Auch bei css-Positionierungen hatte ich schon Probleme, die sich jedoch durch etwas tüfteln lösen ließen.
Ich hoffe, dass OP 7 noch mal eine gründliche Revision erfährt, sonst bleibt 6.05 mein Standardbrowser.

[Masin Al-Dujaili]

Prinzipiell kannst Du überlegen, ob Operabenutzer nicht eh gewisse
Einschränkungen gewohnt sind. Ein so kleiner Fehler würde mich
jedenfalls nicht abschrecken eine interessante Seite zu besuchen.
Vermutlich würde ich mir allerdings denken, daß der Designer mal
wieder nur auf IE-Benutzer geschielt hat :).

[molily]

Hallo, Christian,

Ich habe eine Menütabelle mit Bildwechsel bei OnMouseOver mittels JavaScript aufgebaut.

Wenn du nur die Hintergrundfarbe ändern willst, kannst du auf Hintergrundbilder verzichten, und wie gesagt auch auf JavaScript, aber dann wird der Effekt bei vielen nicht zu sehen sein.

Opera 7.10 und 7.03(de) hinterlassen beim Bildwechsel jedoch 'Relikte', vor allem, wenn man die Maus schneller über die Zellen bewegt. Um den Fehler einzugrenzen habe ich einmal folgendes Beispiel verfasst:
http://cnk.gmxhome.de/test/test.htm
Es wäre nett, wenn mir jemand sagen könnte, ob es an meinem Bildwechsel liegt oder ein Problem von Opera 7 ist.

Definitiv ein Opera-Problem, es tritt auch bei background-color und ohne JavaScript auf. Ich tippe darauf, dass die feste Höhe der Zelle die vertikal mittig ausgerichtete Line-Box des Texts darin nicht erhöht. Die Relikte treten zwischen Line-Box und den Zellenrändern, speziell dem oberen, auf. Nun könntest du die Line-Box mittels line-height in der Höhe der Zelle anpassen und das Problem würde verschwinden, aber das willst du vermutlich nicht. Nun musst du dafür sorgen, dass die Line-Box an den oberen Zellenrand stößt, das kannst du mit vertical-align:top; erreichen, das scheint auch dein Problem mehr oder weniger zu lösen. Mit padding kannst du dann die Innenabstände (die Zentrierung) wiederherstellen. Daraufhin schlägt natürlich das Setzen der Zellenhöhe fehl, sodass du zwischen font-size, line-height und padding einen Kompromiss finden musst, welcher die Zelle auf die gewünschte Höhe bringt, unabhängig von height.

Abgesehen davon melde den Bug bitte: https://bugs.opera.com/bugreport.cgi. Jedoch reduziere die Testseite auf das Wesentliche und schreibe dazu, dass es auch Hintergrundbildern sowie -farben passiert und erkläre die Umstände (Höhe größer als Line-Box, mittlere Ausrichtung).

Wenn du im Opera 7.x irgendetwas testest: Füge unbedingt eine volle Dokumenttyp-Deklaration in das Dokument ein (<!DOCTYPE html PUBLIC ...>), damit Opera in den standardkonformen Rendermodus schaltet. Das Forumsarchiv berät dich diesbezüglich, siehe auch http://www.opera.com/docs/specs/doctype/ und http://www.google.at/search?q=doctype+switch.

Grüße,
Mathias

[Christian Kuhlmann]

Danke für die umfassende Antwort.
Werd' mir noch überlegen, ob ich beim Layout zu Gunsten von OP7 einen Kompromiss eingehe, oder den Fehler ignoriere und hoffe, dass die nächste Revision damit keine Probleme mehr hat.
Danke für Euren Rat
   Christian