Rollover Backgroundbild ohne Ruckeln auch im IE6 ohne JavaScript

Es geht um ein Hoverbild, ein BG-Bild, das dann beim Hover das Motiv ändern soll, meinetwegen von Schwarzweißmotiv auf ein Farbmotiv.
Eigentlich ist es ganz einfach per CSS zu lösen;  man nimmt ein background Bild mit beiden Motiven untereinander und macht einen block
Container drum herum, der natürlich ein a-Tag sein muss, weil der IE6 nichts anderes per :hover ansprechen lässt, der genau die Höhe eines
Motives hat (wie gesagt: im Bild sind beide Motive übereinander in einem Bild drin, also auch doppelt so hoch) dann bestimmt man per css,
dass das BG Bild des Block Elements um die hälfte nach oben per background-position left -100px gezogen wird.

Also – wenn das Motiv 100px  hoch ist, wäre das gesamte Rolloverbild 200px hoch, das nähme man als Bg-Bild vom Block Element(in unserem Fall wäre es dann das a-Tag mit display:block  und verpasst ihm eine „BG-Position:left -100px;“    .. Leider Ruckelt aber bei dieser Methode im IE6 das Bild dennoch, weil es trotzdem nachgeladen wird, sobald man es „anfässt“. Um das „Anfassen“ des Bildes zu umgehen und auch den IE6 zufrieden zu stellen, muss man um den A-Tag einen Div, oder einen anderen Block Container bauen, der genau die gleichen Maße hat, wie das Motiv (also 100px hoch – halb so hoch, wie das eingebettete Bild, das beide Motive beinhaltet und uns so das Preloaden erspart).
Das A-Tag wiederrum bekommt wieder einen display:block verpasst, nun jedoch 200px hoch. Wenn man nun das BG-Bild
des a-Tags belassen würde, würde man es indirekt ja doch anfassen, wenn man on :hover den a-Tag mit einem margin-top:-100px versieht,
denn bewegt man den a-Tag und bewegt damit auch sein direktes style Attribut… Verabschieden wir uns also vom Gedanken des
BG-Bildes und platzieren das selbe Bild innerhalb des A-Tags mit dem style position:absolute; left:0;top:0 und verpassen dem a-Tag
ein Position:relative; nun bewegt man das A-Tag wie schon vorher angedacht on :hover um 100px nach oben per margin-top:-100px;
Da das Bild nicht mehr ein Attribut des A-Tags ist, weil es kein BG-Bild vom a-tagt mehr ist, „fühlt“ es sich auch nicht mehr angefasst
und das Bild wird nicht nachgeladen und es ruckelt auch nicht mehr. (dieses Problem hat aber auch nur der IE6, sogar bei caching On)
nicht einmal  seine Vorgänger hatten Probleme damit. Nun kann man den Link beliebig befüllen, da das Bild als absolut positionierter
Layer inne wohnt und die anderen Nodes nicht in der Position beeinträchtigt
(und das auch nur, wenn das Bild im a-Tag als letzter Tag platziert wird.)
Wenn man ganz sicher gehen will, packt man den restlichen (oberen) Inhalt auch in einen absoluten Layer und verpasst
diesem einen höheren z-index.

Fertig und überall ruckelfrei und absolut Javascript frei. im IE4 habe ich es nicht getestet, aber im IE5 funktioniert es noch wunderbar.

Download Beispiel (RAR)

Schreibe einen Kommentar

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.