Autor |
Nachricht |
DooH
Threadersteller
Dabei seit: 06.08.2003
Ort: Köln
Alter: 43
Geschlecht:
|
Verfasst Fr 18.08.2006 15:37
Titel IE: Transparentes PNG im background-image |
|
|
Hallo zusammen!
Abschnitt für Moderatoren:---------------------------------------------------
Ja, ich habe die Suche benutzt, aber mein Problem ist etwas spezieller
----------------------------------------------------------------------------------
Hallo zusammen!
Ich habe eine Website mit PNGs erstellt ...
(die sind auch unbedingt notwendig, weil eine Schattierte Box über ein Hintergrundbild scrollt)
dazu habe ich folgendes Script verwendet:
http://www.twinhelix.com/css/iepngfix/
das klappt auch soweit prima, allerdings werden die PNGs, die ich in der externen CSS-Datei als Background-Image definiert habe immernoch mit grauem Hintergrund angezeigt!
Was soll ich tun?
Grüße
Timo
[edit]
Titel geändert
Zuletzt bearbeitet von tacker am Fr 18.08.2006 16:50, insgesamt 1-mal bearbeitet
|
|
|
|
|
anonymous design
Gesperrt
Dabei seit: 10.08.2006
Ort: Berlin
Alter: 45
Geschlecht:
|
Verfasst Fr 18.08.2006 15:52
Titel
|
|
|
Mir persönlich ist keine Methode bekannt die den Alphafilter des IE (der in den diversen Hacks genutzt wird) auch auf HG-Bilder anwenden könnte. Eine Möglichkeit wäre es das Bild über den IMG-Tag einzubinden und den eigentlichen Inhalt darüberzulegen. Also zwei Ebenen übereinander mit unterschiedlichem Z-INdex
Wenn es mittlerweile eine Methode geben sollte die das ganze zuverlässig auch für HG-Pics ermöglicht, her damit, ich bin nicht ganz auf dem laufenden (Wissenstand etwa Jahreswechsel 2005/06)
Zuletzt bearbeitet von anonymous design am Fr 18.08.2006 15:53, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Feile
Dabei seit: 02.08.2005
Ort: Senden
Alter: -
Geschlecht:
|
Verfasst Fr 18.08.2006 15:52
Titel
|
|
|
sind das 32bit pngs? und die schatten haben vermutlich ne Halbtransparenz oder so ne?
Das kann der IE6 noch nicht. Erst der IE7 kann das.
Die einzigen PNGs die imo momentan was taugen sind die 8-Bit varianten für Transparenz.
Ich hoffe ich treffe hiermit deine Frage
|
|
|
|
|
DooH
Threadersteller
Dabei seit: 06.08.2003
Ort: Köln
Alter: 43
Geschlecht:
|
Verfasst Fr 18.08.2006 15:59
Titel
|
|
|
Feile hat geschrieben: | sind das 32bit pngs? und die schatten haben vermutlich ne Halbtransparenz oder so ne?
Das kann der IE6 noch nicht. Erst der IE7 kann das.
Die einzigen PNGs die imo momentan was taugen sind die 8-Bit varianten für Transparenz.
Ich hoffe ich treffe hiermit deine Frage |
Eigentlich schon ...
Es sind PNG-24 ... die 8-Bit Variante bringt mir nix, da kann ich auch gleich ein GIF nehmen
|
|
|
|
|
Pixelpole
Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht:
|
Verfasst Fr 18.08.2006 16:05
Titel
|
|
|
Speicher das mal als .js datei und füge es mal in deinem HTML hinzu. Müsste eigentlich klappen. Also bei mir hats zumindest funktioniert.
Code: |
// Global PNG transparency fix for Internet Explorer up to version 6 - Combined by Fotis Evangelou, http://www.webpr.gr/joomla
// The inline PNG fix, courtesy of Bob Osola, http://homepage.ntlworld.com/bobosola/
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
// The background PNG fix, courtesy of Youngpup (http://www.youngpup.net) and Drew McLellan (http://www.allinthehead.com)
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", alphaBackgrounds);
}
function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i<document.all.length; i++){
var bg = document.all[i].currentStyle.backgroundImage;
if (itsAllGood && bg){
if (bg.match(/\.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
document.all[i].style.backgroundImage = "url('/mambots/system/bot_ultimatepngfix/x.gif')";
}
}
}
}
|
|
|
|
|
|
DooH
Threadersteller
Dabei seit: 06.08.2003
Ort: Köln
Alter: 43
Geschlecht:
|
Verfasst Fr 18.08.2006 16:16
Titel
|
|
|
@pixelpole
klappt zwar
ABER: Im Opera stellt ers nichtmehr richtig dar ... die Grafiken erscheinen nur kurz beim reload und sowohl im Opera als auch im IE nimmt er meine Aufzählungszeichen nichtmehr
Zuletzt bearbeitet von DooH am Fr 18.08.2006 16:17, insgesamt 1-mal bearbeitet
|
|
|
|
|
tacker
Dabei seit: 22.03.2002
Ort: Trondheim, Norwegen
Alter: 43
Geschlecht:
|
Verfasst Fr 18.08.2006 16:53
Titel
|
|
|
fyi, GIF hat eine 1-Bit Transparenz. PNG unterstützt 8 bzw. 16 Bit (256 bzw. 65tsd. Stufen).
|
|
|
|
|
DooH
Threadersteller
Dabei seit: 06.08.2003
Ort: Köln
Alter: 43
Geschlecht:
|
Verfasst Sa 19.08.2006 10:36
Titel
|
|
|
Das ist zum verrückt werden, das JavaScript lässt die Grafiken im IE richtig darstellen, schaltet aber die Listenobjekte ab (sprich die Links klappen nicht mehr und meine eigen definierten Listengrafiken erscheinen nicht mehr).
Der Opera zeigt die Grafiken überhaupt nicht an ...
Gibts sonst noch andee Alternativen ... irgendwie scheints ja zu gehn?
Helft mir
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS background-image
[CSS] alt-tag für background-image?
CSS background-image mit em ?
[CSS] Background-image INE
background-image & FF
onLoad und CSS - background-image
|
|