zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wieso macht der IE das nicht?? Halbtransparente png und mouseover....

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.03.2011, 10:38
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.02.2011
Ort: Ravensburg
Beiträge: 134
Scolex befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.03.2011, 16:09
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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>
Mach das mal zum Test ganz weg und schau ob es dann geht
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.03.2011, 16:24
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.02.2011
Ort: Ravensburg
Beiträge: 134
Scolex befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #4 (permalink)  
Alt 15.03.2011, 16:31
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 15.03.2011, 16:38
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.02.2011
Ort: Ravensburg
Beiträge: 134
Scolex befindet sich auf einem aufstrebenden Ast
Standard

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???
Mit Zitat antworten
  #6 (permalink)  
Alt 15.03.2011, 16:41
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 15.03.2011, 19:22
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.02.2011
Ort: Ravensburg
Beiträge: 134
Scolex befindet sich auf einem aufstrebenden Ast
Standard

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????
Mit Zitat antworten
  #8 (permalink)  
Alt 15.03.2011, 19:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 15.03.2011, 19:32
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.03.2011, 19:43
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.02.2011
Ort: Ravensburg
Beiträge: 134
Scolex befindet sich auf einem aufstrebenden Ast
Standard

@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...
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:49 Uhr.