mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 18.04.2024 12:52 Benutzername: Passwort: Auto-Login

Thema: IE: Transparentes PNG im background-image vom 18.08.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> IE: Transparentes PNG im background-image
Seite: 1, 2, 3  Weiter
Autor Nachricht
DooH
Threadersteller

Dabei seit: 06.08.2003
Ort: Köln
Alter: 43
Geschlecht: Männlich
Verfasst Fr 18.08.2006 15:37
Titel

IE: Transparentes PNG im background-image

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
anonymous design
Gesperrt

Dabei seit: 10.08.2006
Ort: Berlin
Alter: 45
Geschlecht: Männlich
Verfasst Fr 18.08.2006 15:52
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Feile

Dabei seit: 02.08.2005
Ort: Senden
Alter: -
Geschlecht: Männlich
Verfasst Fr 18.08.2006 15:52
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DooH
Threadersteller

Dabei seit: 06.08.2003
Ort: Köln
Alter: 43
Geschlecht: Männlich
Verfasst Fr 18.08.2006 15:59
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel


Eigentlich schon ...

Es sind PNG-24 ... die 8-Bit Variante bringt mir nix, da kann ich auch gleich ein GIF nehmen *Schnief*
  View user's profile Private Nachricht senden
Pixelpole

Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht: Männlich
Verfasst Fr 18.08.2006 16:05
Titel

Antworten mit Zitat Zum Seitenanfang

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')";
         }
      }
   }
}
  View user's profile Private Nachricht senden
DooH
Threadersteller

Dabei seit: 06.08.2003
Ort: Köln
Alter: 43
Geschlecht: Männlich
Verfasst Fr 18.08.2006 16:16
Titel

Antworten mit Zitat Zum Seitenanfang

@pixelpole

klappt zwar

Jo! 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 Lächel


Zuletzt bearbeitet von DooH am Fr 18.08.2006 16:17, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
tacker

Dabei seit: 22.03.2002
Ort: Trondheim, Norwegen
Alter: 43
Geschlecht: Männlich
Verfasst Fr 18.08.2006 16:53
Titel

Antworten mit Zitat Zum Seitenanfang

fyi, GIF hat eine 1-Bit Transparenz. PNG unterstützt 8 bzw. 16 Bit (256 bzw. 65tsd. Stufen).
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DooH
Threadersteller

Dabei seit: 06.08.2003
Ort: Köln
Alter: 43
Geschlecht: Männlich
Verfasst Sa 19.08.2006 10:36
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.