Back To Digital Art and Drawing Forum

transparency in Ineternet explorer

  • pclovers
  • Graduate
  • Graduate
  • User avatar
  • Joined: May 21, 2005
  • Posts: 154
  • Loc: Nagpur, India
  • Status: Offline

Post July 2nd, 2007, 9:24 am

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.
Get Free Traffic | Free Facebook Fans
The Gamers Worlds
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 2nd, 2007, 9:24 am

  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8673
  • Loc: Aberdeen, Scotland
  • Status: Offline

Post July 2nd, 2007, 11:20 am

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
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post July 2nd, 2007, 11:51 pm

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
Let's leave all our *plum* where it is and go live in the jungle ...
  • pclovers
  • Graduate
  • Graduate
  • User avatar
  • Joined: May 21, 2005
  • Posts: 154
  • Loc: Nagpur, India
  • Status: Offline

Post July 3rd, 2007, 4:36 am

But .gif usage 256 colour format. I have image with 24bit colour. I want that much colour resolution in image.
Get Free Traffic | Free Facebook Fans
The Gamers Worlds
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post July 3rd, 2007, 5:09 am

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" ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • cognitivedw
  • Born
  • Born
  • User avatar
  • Joined: Jul 11, 2007
  • Posts: 3
  • Loc: Barrie, Ontario
  • Status: Offline

Post July 11th, 2007, 11:57 am

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
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post July 11th, 2007, 8:04 pm

cognitivedw, when posting code please use the code BBCode tags or the php tags (as appropriate) Makes it easier to read.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • Bozebo
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 15, 2006
  • Posts: 709
  • Loc: 404
  • Status: Offline

Post October 25th, 2007, 3:54 pm

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

Page 1 of 1

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 58 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.