|
|||
Wieso macht der IE das nicht?? Halbtransparente png und mouseover....
Hallo,
ich experimentiere mit einer JS-Fade Funktion, Mouseover und einem halbtransparenten png, welches eben durch das mousover über ein bestimmtes div angezeigt werden soll. Siehe Link, rechter Bereich: Entwurf für Kunde Funktioniert alles toll in Firefox, Chrome, Safari und Opera, aber nicht im IE 8 und älter Das halbtransparente png wird grau angezeigt, obwohl alle anderen pngs auf der Seite korrekt mit Transparenz angezeigt werden und der mouseover-effekt funktioniert im IE nicht richtig wenn man über die Schrift geht... Aber warum? Hat mir jemand einen Lösungsansatz? |
Sponsored Links |
|
||||
Ich nehme an, weil du allen IEs (auch dem IE7 und IE8, die beide PNGs korrekt unterstützen) den PNG-Fix aufdrückst:
HTML-Code:
<style type="text/css"> <!-- img, div { behavior: url(iepngfix/iepngfix.htc); } --> </style>
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
Sponsored Links |
|
|||
Hallo Boris,
nein darin liegt es nicht. Habe den Hack weggemacht und verhält sich noch wie zuvor: das halbtransparente png wird ohne Transparenz grau dargestellt! Habe jetzt die JS Funktion ausgetauscht und zwar die fade-Funktion mit einer einfachen Einblendfunktion ersetzt, da wird das png korrekt dargestellt!?! Könnte mich mit dieser Lösung einigermaßen zufrieden gaben, obwohl die fade-funktion wesentlich schöner ist, allerdings wird das layer immer noch ausgeblendet, sobald ich mit der Maus über den Text geh!!! Hab schon versucht den Text in ein eigenes div zu setzen und über den z-index auf einer anderen Stufe anzuordnen, hat aber auch nichts gebracht. Gibts ne Möglichkeit/Idee/Tip wie ich das verhindern kann. Bin am Ende von meinem Latein... |
|
||||
Naja, ich würde mich mal nach einem aktuelleren JS-Skriptchen für deinen Effekt umschauen. Deiner ist von 2006.
Schau mal nach jQuery Effekten
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
|||
Okay, aber das ändert ja nichts an dem Problem mit dem mousover...!?
Auf die Fade-Funktion kann ich auch verzichten, nicht aber dass das layer ausgeblendet wird sobald ich auf der Schrift bin... Woran erkennt man übrigens wie alt ein Effekt ist??? |
|
||||
An sowas zum Beispiel?
HTML-Code:
// Spry.Effect.js - version 0.38 - Spry Pre-Release 1.6.1 // // Copyright (c) 2006. Adobe Systems Incorporated.
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
|||
So, habe jetzt diese alte Spry-fadeIn Funktion durch die jQuery ersetzt, was auch funktioniert.
HTML-Code:
$(document).ready(function(){ $("#apDiv1").fadeTo("slow", 0.0); }); function fade() { $(document).ready(function(){ $("#apDiv1").fadeTo("slow", 1); }); } function fadeOut() { $(document).ready(function(){ $("#apDiv1").fadeTo("slow", 0.0); }); } HTML-Code:
<div id="apDiv1" > Text </div> <div id="apDiv2" onmouseover="fade()" onmouseout="fadeOut()"> </div> Jetzt habe ich aber wieder das Problem, dass das png nicht transparent dafür grau angezeigt wird!? Auch bei mouseover bei der Schrift habe ich das alte Problem wieder, dass er die Schrift als mouseout erkennt... Was soll ich denn jetzt noch tun? Ist IE etwa nicht in der Lage das korrekt anzuzeigen, nicht mal mit Tricks, Hacks, etc???? |
|
|||
Wenn du das PNG weglässt und eine weiße Hintergrundfarbe nimmst, kannst du deinen Transparenzeffekt haben, indem du nicht ganz deckend einfadest.
Dein Link ist nicht aktualisiert.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
Mir fällt dabei ein - wieso machst du den Transparenzeffekt eigentlich über ein PNG? Das geht mit CSS doch einfacher?
Zum PNG - als was hast du es denn gespeichert? 8, 24, 32 Bit? Alphatransparenzen drin?
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
Sponsored Links |
|
|||
@fricca
Weil dann die Schriftopazität doch auch reduziert wird. Oder? @Boris Habe das png schon in allen Bitstufen abgespeichert? Alphatransparenz? Hmmm, wie/wo kann ich das gesondert einstellen? Bei “Für Web und Geräte speichern…” habe ich "Transparenz" abgehakt... |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Jquery Code für Mouseover etwas vereinfachen | connor | Javascript & Ajax | 8 | 08.03.2010 00:01 |
CSS Spry Menu Problem mit Hintergrund bei Mouseover | myron | CSS | 9 | 12.07.2009 14:34 |
png nach mouseover nicht mehr transparent | heideputz | Javascript & Ajax | 1 | 07.04.2007 21:16 |
Transparentes PNG - beim Mouseover teilweise Anzeige im IE 6.0 | NicolaibassDH | CSS | 2 | 27.03.2007 11:39 |
png IE background-image | iFranco | Site- und Layoutcheck | 4 | 21.04.2005 11:20 |