Antworten zum Thema „Flackerndes mouseover“

[dobecker]

Auf meiner Homepage,
welche ich zukünftig für Bewerbungen verwenden will ,
habe ich das Problem das meine Buttons an der linken seite
nur ,,flackernd" den Mouseover effekt von JS darstellen..
liegt das vielleicht an zu langen Ladezeiten ?

inter.bplaced.net

wenn es an den ladezeiten liegt weiß ich nicht wie ich diese reduziren kann
ich sehe mir immer diese riesigen Webseiten an welche eine ladezeit von 1-2 sekunden haben und trotzdem perfekt dargestellt werden und frage mich wie das möglich ist ?

vielen dank =)

 

[bbbl]

AW: Flackerndes mouseover

Ich konnte kein übermäßiges Flackern feststellen. Tritt das Flackern bei Dir denn auch auf, nachdem die Mouseover-Grafik schon einmal geladen wurde, bzw. sich im Browser-Cache befindet? Ansonsten würde Dir vorschlagen sog. CSS-Sprites zu verwenden. Dabei erstellst Du eine einzige Grafik, die den Normal und Hover-Zustand enthält. Dann verschiebst Du in CSS bei :hover einfach die background-position um den Mousover-Effekt zu erzielen.

 

[sokie]

AW: Flackerndes mouseover

Da musst du im Ganzen nochmal ran, und grundsätzlich überlegen, mit welchen Browsern die Zielgruppe Deine Seiten anschaut. im IE6 sieht die Seite einfach nur zerschossen aus. Die hover-effekte per javascript zu erzeugen macht nur für diese älteren browser Sinn (für die td Elemente)
inlinestyles wie dieser:

<td style="position:height:100px; width:100px; height:100px;z-index:100; background-repeat:no-repeat;"

sind so fehlerhaft, dass man sie praktisch fast ganz weglassen könnte/sollte.
mit den Alpha tranzparenzen der png kommt der IE6 so nicht zurecht.
Darstellung im IE6

 

[dobecker]

AW: Flackerndes mouseover

da denkt man man kann wenigstens ein bissen und dann sieht man mal was
man eigentlich für einen müll produziert

Wie kann man denn das Javascript mouseover ersetzen ?

Und transparente Bilder sollte ich also ganz lassen ?
Denn ich gehe davon aus das Unternehmen teilweise noch mit dem
IE 6 arbeiten ...

Vielen dank für die schnellen und überaus hilfreichen Antworten ! =)

 

[sokie]

AW: Flackerndes mouseover

Denn ich gehe davon aus das Unternehmen teilweise noch mit dem
IE 6 arbeiten ...

in einer der Letzten Ausgaben des Internet Magazins wurde genau auf diesen Umstand hingewiesen, dass gerade Unternehmen mit Updates eher zurückhaltend seien, dehalb musst du den IE6.0 wohl gerade bei Bewerbungen berücksichtigen.
Das Javascript für mouseovers (bzw :hover in css) kannst Du umgehen, wenn du das css :hover ausschliesslich für <a> Elemente nutzt, nur hier kann der IE6.0 das auch.
Deine <a> elemente lassen sich auch einfach als blockelemente (display:block) und mit height und width formatieren. in dem Zusammenhang macht es kaum noch Sinn an Tabellenkonstruktionen zu Layoutzwecken festzuhalten.
Zu berücksichtigen ist allenfalls,dass <a> Elemente keine weiteren <a> Elemente als Inhalt haben dürfen.
Was den Einsatz von Hovergrafiken angeht, hast du ja schon mit den css-sprites einen wertvollen Tip, wie man die Nachladezeiten umgehen kann.
Da alles sind nach meiner Meinung allenfalls sekundäre Überlegungen, in der Hauptsache wird es ja darum gehen, die Inhalte, die dich als neuer Mitarbeiter in der Firma des Besuchers qualifizieren logisch strukturiert, gut zugänglich und ansprechend zu präsentieren.
Hier ist auch der Einsatz einer Schrift wie

font-family: freestyle script;

ohne Alternativen ein möglicher Fallstrick.

 

[McKinley591]

AW: Flackerndes mouseover

da denkt man man kann wenigstens ein bissen und dann sieht man mal was
man eigentlich für einen müll produziert

Wie kann man denn das Javascript mouseover ersetzen ?

Und transparente Bilder sollte ich also ganz lassen ?
Denn ich gehe davon aus das Unternehmen teilweise noch mit dem
IE 6 arbeiten ...

Vielen dank für die schnellen und überaus hilfreichen Antworten ! =)

Zum Thema transparente Bilder:
Der genannte Fehler tritt im IE6 bei Bilder des Typs PNG auf. GIF Bilder mit transparenz hingegen sind kein Problem.
Ich umgehe dieses Problem mit einer Browserweiche (auch als CSS Hacks bekannt):

<!--ABFRAGE BROWSERVERSION ZUR PNG/GIF-DARSTELLUNG,
Abfrage für Browser bis IE6, da dort PNGs nicht transparent dargestellt werden;
bis IE6 wird die GIF-Grafik geladen - an sonsten die PNG-Grafik-->
<!--[if lte ie 6]><img src="layout/logo.gif" width="541" height="213" alt="Honda-Scheune-Dollbergen Logo"><![endif]-->
<!--[if gte ie 7]><!--><img src="layout/logo.png" width="541" height="213" alt="Honda-Scheune-Dollbergen Logo"><!--<![endif]-->
<!--ABFRAGE ENDE-->

Google einfach mal nach Browserweiche bzw. CSS hacks. Da wirst du auf jeden Fall fündig. Als Übergangslösung für die nächsten Monate(wohl eher Jahre) bis die Anzahl der User die mit IE6 arbeiten zu vernachlässigen ist, find ich das ausreichend.

btw: Und bitte nenne deine title-Tags nicht "Unbenanntest Dokument". ^^