3
Internet Explorer und PNG
Wer kennt das Problem nicht: Ich brauche fürs Web-Design ein Bild mit transparentem Hintergrund. JPEG kanns nicht und GIF macht aus einem Schatten irgendwas komisches, was nicht mehr wirklich wie Schatten aussieht. Bleibt als neues Format noch PNG. Aber da hat der Internet Explorer noch Probleme.
PNG ist ein neues Bildformat, das ursprünglich entstanden ist, um die Lizenzgebühr des GIF-Formats zu umgehen. Dabei ist ein Format herausgekommen, das GIF's um Klassen schlägt. Bessere Qualität bei meist kleineren Dateigrößen. Das Webdesigner Herz schlägt höher bei einem solchen Gedanken. Ja auch Schattenwurf auf einen transparenten Hintergrund funktioniert mit PNG. *Jubel*
Aber schnell wird klar: Unser Freund der Internet Explorer kann mal wieder was nicht richtig. Diesmal hat er Probleme mit dem Anzeigen eben jenes transparenten Hintergrunds (Alpha Layer). Stattdessen macht er ihn weiß oder auch mal in ner anderen Farbe. Je nach belieben. Doch mit einem kleinen JavaScript kann man auch dem Internet Explorer beibringen, PNG's korrekt anzuzeigen. Das möchte ich im Folgenden erklären:
Zunächst legt man eine Datei an. Ich nenne diese immer pngfix.js. Einmal angelegt ist sie auch immer wieder verwendbar
In diese Datei kommt jetzt folgender Code:
Hat man nun Seiten, die PNG-Bilder enthalten fügt man noch folgende kleine Passage zwischen den head-tags ein (Runde Klammern "(" und ")" sind durch spitze Klammern "<" und ">" zu ersetzen):
Damit werden automatisch alle auf der Page befindlichen PNG's mit einem Alpha-Layer versehen, mit dem der IEx auch was anfangen kann. Aber nur dann, wenn der Browser auch ein IEx ist. Für alle anderen Browser ändert sich nix.
Viel Spaß beim Ausprobieren.
Ciao Thorsten
PNG ist ein neues Bildformat, das ursprünglich entstanden ist, um die Lizenzgebühr des GIF-Formats zu umgehen. Dabei ist ein Format herausgekommen, das GIF's um Klassen schlägt. Bessere Qualität bei meist kleineren Dateigrößen. Das Webdesigner Herz schlägt höher bei einem solchen Gedanken. Ja auch Schattenwurf auf einen transparenten Hintergrund funktioniert mit PNG. *Jubel*
Aber schnell wird klar: Unser Freund der Internet Explorer kann mal wieder was nicht richtig. Diesmal hat er Probleme mit dem Anzeigen eben jenes transparenten Hintergrunds (Alpha Layer). Stattdessen macht er ihn weiß oder auch mal in ner anderen Farbe. Je nach belieben. Doch mit einem kleinen JavaScript kann man auch dem Internet Explorer beibringen, PNG's korrekt anzuzeigen. Das möchte ich im Folgenden erklären:
Zunächst legt man eine Datei an. Ich nenne diese immer pngfix.js. Einmal angelegt ist sie auch immer wieder verwendbar
In diese Datei kommt jetzt folgender Code:
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');\">"
img.outerHTML = strNewHTML
i = i-1
}
}
}
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('/assets/images/x.gif')";
}
}
}
}
window.attachEvent("onload", correctPNG); Hat man nun Seiten, die PNG-Bilder enthalten fügt man noch folgende kleine Passage zwischen den head-tags ein (Runde Klammern "(" und ")" sind durch spitze Klammern "<" und ">" zu ersetzen):
<!--[if gte IE 5.5000])
<(script type="text/javascript" src="pngfix.js"></script>
<![endif]-->Damit werden automatisch alle auf der Page befindlichen PNG's mit einem Alpha-Layer versehen, mit dem der IEx auch was anfangen kann. Aber nur dann, wenn der Browser auch ein IEx ist. Für alle anderen Browser ändert sich nix.
Viel Spaß beim Ausprobieren.
Ciao Thorsten
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 23894
Url: https://administrator.de/tutorial/internet-explorer-und-png-23894.html
Ausgedruckt am: 22.12.2024 um 02:12 Uhr
3 Kommentare
Neuester Kommentar
Danke für das gute Script!
Ich hab ein paar kleine Änderungen vorgenommen (spezifisch für meine Seite) aber es arbeitet ohne Probleme!
Hab es bisher noch nicht mit dem IE7 ausprobiert, aber das kommt noch!
Grüße,
Daniel
Ich hab ein paar kleine Änderungen vorgenommen (spezifisch für meine Seite) aber es arbeitet ohne Probleme!
Hab es bisher noch nicht mit dem IE7 ausprobiert, aber das kommt noch!
Grüße,
Daniel
So viel Code für sowas simples?
Das mach ich mir leichter!
Vorraussetzung: Aktiviertes SSI
Und in der CSS für den IE (name.css) kommt dann eure Klasse:
Und in der anderen CSS braucht ihr den Filter nicht ...
Geht wunderbar
Das mach ich mir leichter!
Vorraussetzung: Aktiviertes SSI
<!--#if expr="$HTTP_USER_AGENT = /.*MSIE.*/" -->
<style type="text/css" media="all">@import url("name.css");</style>
<!--#else -->
<style type="text/css" media="all">@import url("name2.css");</style>
<!--#endif -->Und in der CSS für den IE (name.css) kommt dann eure Klasse:
.banner {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="BILDNAME.PNG", sizingMethod="crop");
background-repeat: no-repeat;
}Und in der anderen CSS braucht ihr den Filter nicht ...
Geht wunderbar
Super das Script, habs auch zum laufen gebracht. Nur irgend etwas ist komisch wo ich hoffe, dass mir jemand helfen kann. Auf dieser Seite (http://www.bcneuheim.ch/gen/anlaesse1.php) habe ich das Script eingefügt, die Transparenz funktioniert, nur verzieht mir der IE einzelne Grafiken und die folgenden stellt er gar nicht mehr dar. Weiss jemand warum?
Dies wäre die Seite ohne Script: http://www.bcneuheim.ch/gen/anlaesse.php
Vielen Dank
Gruss Thomas
Dies wäre die Seite ohne Script: http://www.bcneuheim.ch/gen/anlaesse.php
Vielen Dank
Gruss Thomas
