ie und transparente png

hups · 29.08.2006, 12:34

hallo
da meine indexseite teilw transparente bilder hatt wollt ich mal fragen ob es ein code gibt damit beim laden mit den IE eine andere index.htm geladen wird

mfg

newcommer · 29.08.2006, 12:56

Du kannst die Sache auch umgehen, indem Du dem IE beibringst, die png Dateien zu verstehen ...

Im Header schreibst Du:

HTML-Code:

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->

und dann bindest Du noch die entsprechende Datei "pngfix.js" ein ... Hier der Inhalt der Datei (bitte genau so übernehmen, ist nicht von mir ;-))

HTML-Code:

// Correctly handle PNG transparency in Win IE 5.5 or higher.
// [url]http://homepage.ntlworld.com/bobosola[/url]. Updated 02-March-2004

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);

Ist vielleicht schon etwas angestaubt diese Vorgehensweise, da ich auf der ein oder anderen Seite schon was anderes gesehen habe (weiss nur gerade nicht mehr wo), aber es klappt zumindestens ;-)

hups · 29.08.2006, 13:20

hallo
so den ersten teil ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#rahmen-pos {
margin-top: auto;

thanks und wo genau kommt der 2teil rein ?

mfg

newcommer · 29.08.2006, 13:24

den 2. teil machst du in eine extra Datei (und nur das !!!!) und speicherst die im Hauptverzeichnis unter pngfix.js ab

hups · 29.08.2006, 13:30

habs mal so versucht den 1 teil hier

HTML-Code:

<script type="text/JavaScript">
<!--
[if gte IE 5.5000]> <script type="text/javascript" src="pngfix.js"></script> <![endif]-->
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

und den 2ten teil als datei .js

wenn ich das so mache wie oben ist die zeile grau
mfg

sorry hab no plan

ist das so ok ?

newcommer · 29.08.2006, 13:41

Also ... hier dann direkt das Beispiel aus meiner Seite (zu sehen unter http://w4s.de)

Der HEAD Bereich sieht so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
<title>WEB4SAAR - Mediendesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="title" content="WEB4SAAR - Mediendesign" />
<meta name="date" content="2005-11-13" />
<meta name="author" content="Joachim Göddel" />
<meta name="publisher" content="Web4Saar, Joachim Goeddel" />
<meta name="copyright" content="Web4Saar, Joachim Goeddel" />
<meta name="revisit-after" content="15 days" />
<meta name="expires" content="2099-12-31" />
<meta name="keywords" content="Webdesign, Mediendesign, Internet, Barrierefrei, W3C, WAI, Internetseiten, Hülzweiler, Saarland, Deutschland" />
<meta name="description" content="Web4Saar bietet Ihnen barrierefreie Webseiten in ansprechendem Design" />

<meta name="page-topic" content="Unternehmenspräsentation" />
<meta name="robots" content="index,follow" />
<meta name="language" content="de" />
<style type="text/css">
@import url(css/style_sommer.css);
@import url(css/style.css);
@import url(css/.css);
</style>


</head>

Alles andere aus dem 2. Abschnitt kommt in eine komplett leere Datei (da steht kein Header und nix drin) ... Die speicherst Du dann unter pngfix.js ab ... Der Pfad zu der Datei muss natürlich stimmen !!! In meinem Fall liegen alle Dateien im Hauptverzeichnis (inkl. der JavaScript Datei) ... Ansonsten musst Du den Pfad zu der js Datei anpassen ...

hups · 29.08.2006, 14:02

hi
hab jetzt folgendes eine datei heist pngfix.js im ordner wo die index.html liegt nun das if so

HTML-Code:

	height:471px;
	z-index:3;
}
-->
</style>>>>>>>>>>>>>>>>>>>>>>>>>>>>dein script
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->[/color]

>>>>>>>>>>>>>>>>>ab hier liegt ein script für die Buttons

<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0

wenn ich jetzt auf Vorschau gehe komischer weise zeigt er meinen ie als 6.0
an ist da keine veränderung ??

schau mal meine web bisher ohne dein script
das textfeld hintergrund und der ganze bereich ist ne pgn datei

http://www.michels-world.de/Mallorca/

newcommer · 29.08.2006, 14:30

hmmmm ... ich seh Deine Seite im FF und versteh annähernd was Du meinst ... Mal abgesehen davon, dass viele Bilder Deiner online-Version noch auf den lokalen Pfad Deines Rechners zeigen, und so nicht angezeigt werden, sollte es aber ohne Probleme mit dem Script funktionieren ...

Ich lade die Seite mal auf meinen Rechner und schau mal nach ...

newcommer · 29.08.2006, 14:52

Also dann ... mit dem Script funktioniert es, aber:

Du hast die png Datei im 8bit Modus gespeichert ... damit der Effekt klappt, musst Du sie aber im 24bit Modus abspeichern !!!

Siehe Dein Beispiel unter: http://w4s.de/index.php?artikel=michael

hups · 29.08.2006, 15:22

hallo
super ich glaub so gehts erstmal ist ja bescheuert der bill gates das man im ie keine transparente anzeigen kann (bei png)

kannst du mir sagen wo du welche bilder nicht siehst bei mir seh ich alle

warum sehen die Buton im ie so unscharf aus ?

und kannst du mir sagen ob man webtechnisch das blockieren von .js dateien beim ie wegbekommt ist ja doof für user die das nicht wissen dann haben die button keine effekte.

mfg

newcommer · 29.08.2006, 15:28

Zum JS -> laut einer aktuellen Statistik sind 99.9% aller User mit JS unterwegs, also keinen Kopf machen wegen der paar Exoten ...

Bilder: -> In Deinem Abschnitt von CSS hast Du absolute Pfade zu Deinem Rechner (File:\\...) ... ide musst Du nur noch durch relative Pfade ersetzen

Unschärfe IE -> versuchs auch mal mit 24bit Dateien ;-)