Cashing-Problem bei JS-seitiger CSS-änderung

[alike]

Hi ihr,

habe da ein kleines aber "feines" Problem mit dem Caching im Firefox. (Zumindest nehme ich an, dass es daran liegt :))

Und zwar geht es um den Tab "Übersicht" auf jener Seite: European Coatings

Was dort passiert? Die Maus wird bewegt, und wenn sie in einen bestimmten
Bereich kommt, soll sich das Hintergrundbild des Div's ändern.

Die Bilder sind vorher in IMG-Objekten vorgeladen und ich verwende dann nur noch das .src Attribut um die url des Hintergrundbildes zu ändern.

Das funktioniert auch alles. Problem ist nun aber, dass der Firefox scheinbar JEDES mal das Bild neu runterläd, und dadurch natürlich unschöne ruckler, je nach Serverbelastung, entstehen. Im IE klappt alles wunderbar, allerdings auch erst nachdem man jedes Bild einmal gesehen hat. Scheinbar funktioniert mein Vorladen der Bilder also auf die Art nicht.

Hat irgendwer dazu eine Idee?

Mfg
Alike

p.s.:
Achja, vielleicht liegt es ja an der Bildzuweisung, deswegen hier der Code Ausschnitt zum zuweisen des Hintergrundbildes

areaOverview.style.backgroundImage = "url(" + uebersicht.src + ")";

 

[alike]

Ich hol ungern alte Threads aus der Versenkung, aber einen neuen aufmachen mit dem gleichen Inhalt ist auch nicht die feine Art.
Gibts denn niemanden der eine Idee hat?

 

[Efchen]

Ich weiß nicht, ob es niemanden gibt. Was ich mich dabei nur gefragt habe, warum das Bild, das doch Content darstellt, als Hintergrundgrafik (= Zierde, Beiwerk) eingebaut wird.
Das ist doch die perfekte Anwendung für eine Image Map.

 

[crash]

className setzen ist wesentlich besser, da einfacher zu warten. Evtl. klappt es damit ja besser?

 

[neuroleptika]

Das Hauptbild würde ich als img einbinden.
Darüber würde ich (bei :hover oder onmouseover) ein background-image absolute positionieren.

Alle Zustände könnten in einer Grafik enthalten sein und zunächst mit background-position: -1000px -1000px ausgeblendet werden.
Per css oder javascript könnte sie mit neuen Positionen darüber geschoben werden:

document.getElementById('imghover').style.backgroundPosition = "wertX.px wertY.px";

Wenn die Seite ersteimal geladen ist geht das superschnell.

Um Probleme mit dem z-index zu vermeiden, müßte onmouseover vielleicht für das umspannende Element (Elternelement) gesetzt werden.

Hintergrundbilder mit css-sprites:
http://www.webkrauts.de/2007/10/20/hovereffekte-mit-css-sprites/

 

[alike]

Gut, also eine Lösung für das vorliegende Problem direkt scheint keiner zu haben.
Aber Danke für die anderen Vorschläge. Diese werde ich mir mal genauer
anschauen:)