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, 20613 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
Voice over IP

Großraumstörung QSC Internet und Telefon

Information von StefanKittelVoice over IP3 Kommentare

Hallo, wer seit kurz nach 11 hektisch ist, sollte dies kurz lesen. Seit kurz nach 11:00 am heutigen Tag ...

Tipps & Tricks

Tipps zum Safer Internet Day 2018

Tipp von SheogorathTipps & Tricks3 Kommentare

Moin, da man ja für heute den Safer Internet Day 2018 angesetzt hat, der übrigens nichts mit dem deutschen ...

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 ...

Internet

Tim Berners-Lee will das Internet verändern

Information von FrankInternet3 Kommentare

Einer der Erfinder des Internets, Tim Berners-Lee, hat heute auf der Webseite Inrupt seine Pläne für ein neues und ...

Neue Wissensbeiträge
Erkennung und -Abwehr

Trend Micro Worry Free Business Security 10.0 - erneutes Patch (1494) erschienen!

Tipp von VGem-e vor 27 MinutenErkennung und -Abwehr

Moin, unter ist ein neuer Patch verfügbar, der offenbar auch Windows 10.1809 unterstützt. Tja, wie letztes Mal auch, erst ...

Humor (lol)
Administrator.de Perlen
Tipp von DerWindowsFreak2 vor 4 TagenHumor (lol)6 Kommentare

Hallo, Heute beim stöbern auf dieser Seite bin auf folgenden Thread aus dem Jahre 2006 gestossen: Was meint ihr? ...

Erkennung und -Abwehr
OpenSSH-Backdoor Malware erkennen
Tipp von Frank vor 5 TagenErkennung und -Abwehr

Sicherheitsforscher von Eset haben 21 Malware-Familien untersucht. Die Malware soll Hintertüren via OpenSSH bereitstellen, so dass Angreifer Fernzugriff auf ...

iOS
WatchChat für Whatsapp
Tipp von Criemo vor 8 TageniOS5 Kommentare

Ziemlich coole App für WhatsApp User in Verbindung mit der Apple Watch. Gibts für iOS sowohl als auch für ...

Heiß diskutierte Inhalte
Samba
Windows 10 Client in Samba-Domäne hinzufügen scheitert
Frage von diwaffmSamba32 Kommentare

Hi Leute, ich habe einen Samba Server in der Version 4.9.3 auf einer OpenSuse Maschine laufen. Damit sind momentan ...

Windows Systemdateien
Verknüpfungen nach Pfadwechsel
Frage von Hendrik2586Windows Systemdateien17 Kommentare

Guten Morgen meine lieben Kollegen und Kolleginnen, ich hab da mal eine Frage die Ihr sicher schon kennt. Es ...

Netzwerkmanagement
Sehr langsame Netzverbindung in einem bestimmten Subnet
gelöst Frage von gabeBUNetzwerkmanagement16 Kommentare

Hallo Zusammen Ich habe das folgende Problem: Unser Netzwerk, dass aus verschiedenen Subnetzwerken aufgebaut ist, ist nicht in jedem ...

Exchange Server
Exchange Server 2016 - Autodiscover mehrere Domänen
gelöst Frage von K-ist-KExchange Server15 Kommentare

Hallo, folgende Dinge sind wichtig notwendig, damit Autodiscover funktioniert: - Namensauflösung (zB autodiscover.google.at) - gültiges Zertifikat - .XML Datei ...