transparency in Ineternet explorer

  • pclovers
  • Graduate
  • Graduate
  • User avatar
  • Posts: 155
  • Loc: Nagpur, India

Post 3+ Months Ago

I am using *.png format, with transparent background. Image appeared transparent in the firefox. But in the Ineternet explorer it appear as:
Image

For see transparent image, please open http://subodh.info/ in firefox.
How can I solve this problem. I need help as I am creating site where theme will change as per user. So, banner need to have transparent background.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

By making the file a .gif instead of it being a .png you shouldn't have this problem.

Assuming you're using Photoshop then save it using the "save for web" in the file option and change the file format to .gif, you'll also have to make sure that it is originally a transparent background image (which i'm sure you already have) and choose whichever "Matte" you think would be more appropriate for your image to provide a more defined edge.

I hope this helps. Please let me know how you get on.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

The Gif will work great I'm sure, and here is a tutorial on how to make the transparent Gif's extra smooth around the edges ... http://www.photoshopcafe.com/tutorials/ ... parent.htm
  • pclovers
  • Graduate
  • Graduate
  • User avatar
  • Posts: 155
  • Loc: Nagpur, India

Post 3+ Months Ago

But .gif usage 256 colour format. I have image with 24bit colour. I want that much colour resolution in image.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

That's true, but photoshop's "Save for Web" uses an optimized colour palette, which uses the most used 256 colours in the image and not the standard 256 colour palette, so that not much colour is lost ... for instance this image is a GIF created by using PS's "Save for web" ...
  • cognitivedw
  • Born
  • Born
  • User avatar
  • Posts: 3
  • Loc: Barrie, Ontario

Post 3+ Months Ago

There is a Java fix for this little problem. Hope it helps you out.
Code: [ Select ]
// Java Document
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
  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
     }
   }
  }  
}
window.attachEvent("onload", correctPNG);
  1. // Java Document
  2. function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
  3. {
  4.   var arVersion = navigator.appVersion.split("MSIE")
  5.   var version = parseFloat(arVersion[1])
  6.   if ((version >= 5.5) && (document.body.filters))
  7.   {
  8.    for(var i=0; i<document.images.length; i++)
  9.    {
  10.      var img = document.images[i]
  11.      var imgName = img.src.toUpperCase()
  12.      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  13.      {
  14.       var imgID = (img.id) ? "id='" + img.id + "' " : ""
  15.       var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  16.       var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  17.       var imgStyle = "display:inline-block;" + img.style.cssText
  18.       if (img.align == "left") imgStyle = "float:left;" + imgStyle
  19.       if (img.align == "right") imgStyle = "float:right;" + imgStyle
  20.       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
  21.       var strNewHTML = "<span " + imgID + imgClass + imgTitle
  22.       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  23.       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  24.       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
  25.       img.outerHTML = strNewHTML
  26.       i = i-1
  27.      }
  28.    }
  29.   }  
  30. }
  31. window.attachEvent("onload", correctPNG);



Although the .gif will work it doesn't give the nice edges or shadow that are possible with .png so in sone sites using this js is worth it.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

cognitivedw, when posting code please use the code BBCode tags or the php tags (as appropriate) Makes it easier to read.
  • Bozebo
  • Expert
  • Expert
  • User avatar
  • Posts: 709
  • Loc: 404

Post 3+ Months Ago

cognitivedw wrote:
There is a Java fix for this little problem. Hope it helps you out.
Code: [ Select ]
// Java Document
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
  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
... truncated
  1. // Java Document
  2. function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
  3. {
  4.   var arVersion = navigator.appVersion.split("MSIE")
  5.   var version = parseFloat(arVersion[1])
  6.   if ((version >= 5.5) && (document.body.filters))
  7.   {
  8.    for(var i=0; i<document.images.length; i++)
  9.    {
  10.      var img = document.images[i]
  11.      var imgName = img.src.toUpperCase()
  12.      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  13.      {
  14.       var imgID = (img.id) ? "id='" + img.id + "' " : ""
  15.       var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  16.       var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  17.       var imgStyle = "display:inline-block;" + img.style.cssText
  18.       if (img.align == "left") imgStyle = "float:left;" + imgStyle
  19. ... truncated

Although the .gif will work it doesn't give the nice edges or shadow that are possible with .png so in sone sites using this js is worth it.


I don't see any java there...

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 18 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.