Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Internet Explorer und PNG

Mitglied: netstorm

netstorm (Level 1) - Jetzt verbinden

18.01.2006, aktualisiert 19.04.2007, 20582 Aufrufe, 3 Kommentare

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:

01.
function correctPNG() 
02.
03.
 for(var i=0; i < document.images.length; i++) 
04.
05.
  var img = document.images[i] 
06.
  var imgName = img.src.toUpperCase() 
07.
  if (imgName.substring(imgName.length-3, imgName.length) == "PNG") 
08.
09.
   var imgID = (img.id) ? "id='" + img.id + "' " : "" 
10.
   var imgClass = (img.className) ? "class='" + img.className + "' " : "" 
11.
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " 
12.
   var imgStyle = "display:inline-block;" + img.style.cssText 
13.
   if (img.align == "left") imgStyle = "float:left;" + imgStyle 
14.
   if (img.align == "right") imgStyle = "float:right;" + imgStyle 
15.
   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
16.
   var strNewHTML = "< span " + imgID + imgClass + imgTitle 
17.
     + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
18.
     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
19.
     + "(src=\'" + img.src + "\', sizingMethod='scale');\">" 
20.
   img.outerHTML = strNewHTML 
21.
   i = i-1 
22.
23.
24.
25.
 
26.
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) { 
27.
	window.attachEvent("onload", alphaBackgrounds); 
28.
29.
 
30.
function alphaBackgrounds(){ 
31.
	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, ''); 
32.
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5); 
33.
	for (i=0; i < document.all.length; i++){ 
34.
		var bg = document.all[i].currentStyle.backgroundImage; 
35.
		if (itsAllGood && bg){ 
36.
			if (bg.match(/\.png/i) != null){ 
37.
				var mypng = bg.substring(5,bg.length-2); 
38.
				document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')"; 
39.
				document.all[i].style.backgroundImage = "url('/assets/images/x.gif')"; 
40.
41.
42.
43.
44.
 
45.
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):

01.
<!--[if gte IE 5.5000]) 
02.
<(script type="text/javascript" src="pngfix.js"></script> 
03.
<![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
Mitglied: Aldarin
11.10.2006 um 11:16 Uhr
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
Bitte warten ..
Mitglied: Xaero1982
19.04.2007 um 14:27 Uhr
So viel Code für sowas simples?

Das mach ich mir leichter!

Vorraussetzung: Aktiviertes SSI

01.
<!--#if expr="$HTTP_USER_AGENT = /.*MSIE.*/" --> 
02.
	<style type="text/css" media="all">@import url("name.css");</style> 
03.
<!--#else --> 
04.
	<style type="text/css" media="all">@import url("name2.css");</style> 
05.
<!--#endif -->
Und in der CSS für den IE (name.css) kommt dann eure Klasse:

01.
.banner { 
02.
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="BILDNAME.PNG", sizingMethod="crop"); 
03.
    background-repeat: no-repeat; 
04.
}
Und in der anderen CSS braucht ihr den Filter nicht ...

Geht wunderbar
Bitte warten ..
Mitglied: Tflugi
17.01.2009 um 14:50 Uhr
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
Bitte warten ..
Ähnliche Inhalte
Windows Update

Microsoft Update Katalog ohne Internet Explorer nutzen

Tipp von colinardoWindows Update2 Kommentare

Microsoft ist zwar schon dabei den Katalog Browser unabhängig umzubauen, hier aber trotzdem noch ein schneller Tipp zur Nutzung ...

Webbrowser

Internet Explorer zeigt keine PDFs an "Die Seite kann nicht angezeigt werden"

Tipp von BadgerWebbrowser2 Kommentare

Hatte bei einem User das Problem, dass der Internet Explorer beim öffnen sämtlicher PDFs die Fehlermeldung "Die Seite kann ...

Sicherheit

Zero Day-Schwachstelle im Internet Explorer - wird von APT bereits ausgenutzt

Information von kgbornSicherheit

Im Kernel des Internet Explorer scheint es eine Zero Day-Lücke zu geben, die von staatlichen Akteuren (APT) im Rahmen ...

Windows 10

Windows 10: Spartan Rendering Engine im Internet Explorer 11 aktivieren

Tipp von FrankWindows 10

Hier ein kleiner Tipp, wie man im Internet Explorer 11 von Windows 10 schon jetzt die "Spartan" Rendering Engine ...

Neue Wissensbeiträge
Backup

2016 - Restore mit WBAdmin - iSCSI Device als Sicherungsziel

Erfahrungsbericht von Henere vor 2 TagenBackup1 Kommentar

Servus zusammen, was mich eben einige graue Haare gekostet hat Server 2016. Ich habe meinem Server eine weitere M2 ...

Humor (lol)
(Part num your Hacked phone. +XX XXXXXX5200)
Erfahrungsbericht von Henere vor 4 TagenHumor (lol)10 Kommentare

Mein Handy hat aber ne ganz andere Endnummer. Muss ich mir jetzt Sorgen machen ? :-) Vielleicht betrifft es ...

Exchange Server

Letztes Update für Exchange 2016 CU9 war in gewisser Weise destruktiv

Erfahrungsbericht von DerWoWusste vor 4 TagenExchange Server9 Kommentare

Kurzer Erfahrungsbericht zu Exchange2016-KB4340731-x64 Der Exchangeserver hat wie gewöhnlich versucht, es in der Nacht automatisch zu installieren - abgesehen ...

Erkennung und -Abwehr

Neue Sicherheitslücke Foreshadow (L1TF) gefährdet fast alle Intel-Prozessoren

Information von Frank vor 5 TagenErkennung und -Abwehr3 Kommentare

Eine neue Sicherheitslücke, genannt Foreshadow (alias L1TF) wurde auf der Usenix Security 18 von einem Team internationaler Experten veröffentlicht. ...

Heiß diskutierte Inhalte
E-Mail
Deutsche e-Mail Adresse auf iPhone in Katar. Nur Probleme
gelöst Frage von vanTastE-Mail32 Kommentare

Moin, ich habe hier in Deutschland auf einem Exchange 2013 eine e-Mail Adresse (name@domain.de) für einen Kollegen in Katar ...

Windows Server
Domäne beitreten nicht möglich, unter VMWare windows Server 2016 Core
Frage von AmanuelWindows Server21 Kommentare

Ich habe auf meinem Mac unter VMWare Windows Server 2016 Core und Windows Server 2016 Desktopversion installiert. Beide Systeme ...

Windows Server
Server verliert Dateien und Ordner
gelöst Frage von routeserverWindows Server18 Kommentare

Hallo Freunde, ich habe hier ein Problem, das mich an meine Grenzen treibt und ich würde gerne wissen, ob ...

Windows Tools
User Self Service und Client Management
Frage von OrkansonWindows Tools14 Kommentare

Hallo zusammen, ich hab ein paar verschiedene Fragen: 1. Was benutzt ihr um Software im Unternehmen zu verteilen? 2. ...