PNG-24 Transparant in IE 6 en lager

Door Roy op 20-06-2006 14:14

515 views

Ik heb dit artikel gevonden: http://homepage.ntlworld.com/bobosola/

Maar hoe integreer ik dat hierin:

<?
$titel = preg_replace('#(.){1}#',
'<img src="images/titel/$1.png">',
$rij['titel']);
?>

Heb al veel geprobeerd, maar het lukt niet

PHP Newbie

20-06-2006 14:16

ik heb het ook gelezen, maar ik kreeg het ook niet werkend.. :-S :-(

Frank

20-06-2006 19:51

Laat me je een tip geven, gebruik gewoon geen transpirante png's het breng alleen maar gedonder. Ik ben hier zelf ook wel een tijdje mee bezig geweest, maar ook zonder resultaat. Mijn advies is vergeet die dingen zolang nog niet iedereen de nieuwe IE heeft.

Onbekende gebruiker

20-06-2006 20:16

Zelfde probleem hier.

@Frank
Dat is geen oplossing, dat is het probleem omzijlen. PNG is gewoon een stuk beter dan GIF en JPG. En volgens M$ zelf zou het echt moeten werken. (en heb het ook vaak werkend gezien)

Mebus Hackintosh

20-06-2006 20:20

zie je dit plaatje goed?

ik wel in iedergeval

ik bekijk nu met opera en IE heb ik er ook geen problemen mee en FF weet ik niet

GR. mebus!

edit: het ken ff duren met laden!

Michael -

20-06-2006 20:27

@Mebus
Plaatje is transparant in FF 1.5 en in Opera 8.53 maar NIET in IE 6.0SP2

Mebus Hackintosh

20-06-2006 20:30

héé ja ik zie het nu ook na ja ben niet meer echt fan van IE

als later eigen domein heb
ga ik mensen aanraden om opera of FF te gaan gebruiken!

GR. mebus!

Jelmer -

20-06-2006 21:10

Animee!! Mijne is bijna op. 50 afleveringen in minder dan een week :)

Wilde gok:
<?
$titel = preg_replace('#(.){1}#', '<img src="images/titel/$1.png" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=\'images/titel/$1.png\');">', $rij['titel']);
?>

Mebus Hackintosh

20-06-2006 21:43

@jelmer ben je dan ook anime fan?:p

ik had ook zo een site met al die plaatjes ma ben der mee gestopt vanwege die slechte gratis hosts en een betaalde domein mag ik niet:(

en anders weet ik al dat je veel dataverkeer hebt met zo een site:):p

GR. mebus!

Jason de Ridder

21-06-2006 14:14

een alpha loader. ff googlelen

Thom Snijders

21-06-2006 14:35

Transparante en doorzichtige .png's zijn mogelijk in <IE7.0

Het volgende deel wordt alleen uitgevoerd in IE, omdat FF de Microsoft filters niet ondersteund.
Ik weet niet zeker of het een must was om de grote en positie van het plaatje aan te geven, je moet zelf maar ff proberen of hij het ook doet zonder.


.logo {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='jouwpng.png');
background-repeat: no-repeat; 
left: 0px; 
top: 0px; 
position: absolute;
height: 70px; 
width: 300px;
}

Dit deel wordt alleen in FF gedaan, omdat IE [class] niet ondersteund:


.logo[class] {
background-image:url(jouwpng.png);
background-repeat: no-repeat; 
left: 20px; 
top: 20px; 
position: absolute;
height: 70px; width: 300px;
}

Plak beide in je css en het zou moeten werken voor achtergronden van tables en divs. Aanroepen via class='logo', logo te veranderen in de classnaam die je gebruikt hebt in je css.

Voor normale plaatjes in de IMG tag werkt het anders, hiervoor kan je het volgende javascriptje gebruiken:


/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   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
      }
   }
}

Reageren

Inloggen om te reageren