mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 18.04.2024 17:16 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: Zurück  1, 2, 3  Weiter
Autor Nachricht
Crossfire

Dabei seit: 19.09.2006
Ort: Berlin
Alter: 37
Geschlecht: Männlich
Verfasst Di 19.09.2006 01:19
Titel

Antworten mit Zitat Zum Seitenanfang

Mach doch einfach ne Browser abfrage.
Also:

Code:
<!--[if lt IE 7.]>
<script type="text/jscript" src="deine.js"></script>
<![endif]-->


Mfg,
Crossfire


Zuletzt bearbeitet von Crossfire am Di 19.09.2006 01:22, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
davek

Dabei seit: 09.06.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 04.12.2007 14:17
Titel

Antworten mit Zitat Zum Seitenanfang

Pixelpole hat geschrieben:
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')";
         }
      }
   }
}






Wenn ich das hier verwende für den IE6 werden die grafiken verzogen!!! :-/
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Antestor

Dabei seit: 12.12.2007
Ort: Herzog Widukinds Stamm
Alter: 42
Geschlecht: Männlich
Verfasst Mi 16.04.2008 16:18
Titel

Antworten mit Zitat Zum Seitenanfang

So ich habe ein spezielleres Problem:

Das pngfix.htc funktioniert bei mir, allerdings habe ich jetzt vor, dtransparente PNGs in einem Spry Menu von Dreamweaver zu verwenden. So ein Spry Menu sieht man zB hier: http://www.igap.de/pw/news.php

Damit kommt der IE allerdings nicht klar! Er stellt es grau dar. Kann es sein dass sich da zwei JavaScripts in die Quere kommen?

Bin recht verzweifelt!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Incubator

Dabei seit: 21.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 18.07.2008 06:03
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo Leute. scheint ja ein altes Problem zu sein. gibt's da mittlerweile ne echte Lösung?
Über Browserweiche und die .js-Datei bekomme Ich auch endlich meine CSS-HG-Bilder transparent. Allerdings gehen bei mir auch die Listenpunkte mit den Links flöten.
Zu allem Überfluss habe ich noch ne SmoothGalery eingebaut und die will auch nicht mehr so recht. Selbst wenn in der Gallery nur .jpgs sind erscheint des ätzende Türkis.
Hatt da evtl jemand ne Idee, woran, das nun wieder liegen kann?

Habe selbst mal http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html ausprobiert, aber damit konnte ich nicht umgehen. die Beispieldatein funktionieren mit halbtransparenz, aber meine pngs sind trotzdem blau Au weia!
Ach man kann doch immer wieder Froh sein, dass es noch so viele user gibt, die den IE6 benutzen. *ha ha*
  View user's profile Private Nachricht senden
development

Dabei seit: 14.07.2008
Ort: Nanaimo
Alter: 49
Geschlecht: Männlich
Verfasst Fr 18.07.2008 08:40
Titel

Antworten mit Zitat Zum Seitenanfang

PNG Hack ohne js hier
  View user's profile Private Nachricht senden
Glas

Dabei seit: 24.05.2003
Ort: Bremen
Alter: 41
Geschlecht: Männlich
Verfasst Fr 18.07.2008 08:50
Titel

Antworten mit Zitat Zum Seitenanfang

development hat geschrieben:
PNG Hack ohne js hier


Das ist der Link, der bereits im ersten Postion von 2006 angegeben ist Au weia!
Und nicht ohne js ....

Incubator:
Ne "echte" Lösung, also quasi nativen support des Alpha Kanals eines png24, bieten nur neuere Browser.
Mir ist für ältere Browser kein Weg bekannt, der nicht über JavaScript führt.
  View user's profile Private Nachricht senden
pRiMUS

Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht: Männlich
Verfasst Fr 18.07.2008 09:01
Titel

Antworten mit Zitat Zum Seitenanfang

Glas hat geschrieben:
development hat geschrieben:
PNG Hack ohne js hier


Das ist der Link, der bereits im ersten Postion von 2006 angegeben ist Au weia!
Und nicht ohne js ....

Incubator:
Ne "echte" Lösung, also quasi nativen support des Alpha Kanals eines png24, bieten nur neuere Browser.
Mir ist für ältere Browser kein Weg bekannt, der nicht über JavaScript führt.


heiko_rs hatte mal eine lösung via css und den alpha filtern gepostet, einfach mal danach suchen. wie und ob die funktioniert weiss ich allerdings nicht. ich verwende immer die IE7.JS für den internetexploder <=6
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Glas

Dabei seit: 24.05.2003
Ort: Bremen
Alter: 41
Geschlecht: Männlich
Verfasst Fr 18.07.2008 09:06
Titel

Antworten mit Zitat Zum Seitenanfang

Über diese Dinger?
http://de.selfhtml.org/css/eigenschaften/filter.htm

Das blöde an der Sache ist, dass das properitäre IE Eigenschaften sind, und kein CSS Standard.

Wenn man darauf pfeift, sollte sich grundsätzlich die PNG Transparenz über diese Filter in etwa so wie hier lösen lassen.

http://koivi.com/ie-png-transparency/

Allerdings in meinen Augen auch nicht das gelbe vom Ei.
  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: Zurück  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.