Programming Help

Web Development



What's Here?

  • Members: 149,600
  • Replies: 506,728
  • Topics: 79,848
  • Snippets: 2,666
  • Tutorials: 706
  • Total Online: 1,909
  • Members: 82
  • Guests: 1,827

Welcome to Dream.In.Code
Become an Expert!

Join 149,600 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,909 people online right now. Registration is fast and FREE... Join Now!




png transparency fix from <dic> not working for me?

 
 Reply to this topicStart new topic

png transparency fix from <dic> not working for me?
Israel
7 Oct, 2007 - 07:29 PM
Post #1

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 626


Dream Kudos: 175
My Contributions
I have read a ton of articles on this subject tonight about how to fix IE6 not rendering transparency for png's. Finally, I came across this one here on dreamincode. I've tried to get it to work but have no luck with this, or anything else I've read either. So maybe the common denominator is just me? But here's the code I've been using:

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>The Inn ~ Room 23</title>
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=3.0)">
<style type="text/css">
body{background-image:url("./back.jpg");}
A.txt:link  {color: #FFFFFF; text-decoration: underline}
A.txt:visited {cursor: crosshair; color: #FFFFFF; text-decoration: underline}
A.txt:hover {cursor: crosshair; color: #DCDCDC; text-decoration: underline}
p.one{text-align:center; font-family:Technical; font-size: 1.1em; color: white;}
p.two{text-align:center; font-family:Technical; font-weight:bold; font-size: 1.1em; color: #E6C78E;}
.done{text-align:center; font-family:Technical; font-weight:bold; font-size: 1em; color: #E6C78E;}
img{border:0;}
</style>

<script type="text/javascript">

function fixPngTransparency(obj){
    if(document.body.filters){
        pattern=/.png/gi;
      

filterFix="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ob

j.src+"',sizingMethod='scale');";
        if(obj.src.search(pattern)!=-1){
            obj.style.width=obj.offsetWidth+"px";
            obj.style.height=obj.offsetHeight+"px";
            obj.style.filter=filterFix;
            obj.src="blank.gif";
        }
    }
}

</script>

</head>

<body>
<center>
<div align="center">
<img src="./logo3.PNG" alt="The Statesboro Inn"></div>

<p class="one">106 South Main Statesboro, GA 30458 ~ 912-489-8628 or 800-846-9466<br />
e-mail ~ <a class="txt" href="someone@yahoo.com">

frontdesk@theinn.com</a></p>

<p>
<img src="./23test.png" alt="Picture of Room 23" onload="java script:fixPngTransparency(this);" align="left"></p><br />
<p class="two">~ Room 23 ~<p>
<div class="done">This cozy room is great for a warm cup of coffee<br />
and a good book. The room has a queen size bed and comes with our standard amenities.</div>

<br />
<p></p>
<div align="center">
<a href="./index.html">
<img src="./homebutt.jpg" width="78" height="43"/></a>

<a href="./Guest2.html">
<img src="./RoomsButt.jpg" width="78" height="43"/></a>
</div>

</body>

</html>


Anyone know what I'm doing wrong?
User is offlineProfile CardPM
+Quote Post

girasquid
RE: Png Transparency Fix From <dic> Not Working For Me?
7 Oct, 2007 - 09:27 PM
Post #2

Barbarbar
Group Icon

Joined: 3 Oct, 2006
Posts: 1,294



Thanked: 18 times
Dream Kudos: 725
My Contributions
Have you got a 1-pixel transparent .gif named blank.gif that it can set as the background?
User is offlineProfile CardPM
+Quote Post

Israel
RE: Png Transparency Fix From <dic> Not Working For Me?
7 Oct, 2007 - 10:01 PM
Post #3

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 626


Dream Kudos: 175
My Contributions
Ok, I don't have an image called "blank" that was my bad because I had looked over about 7 examples and got a little tired I guess. However, I understood that:

CODE
imgWidth=obj.offsetWidth;
imgHeight=obj.offsetHeight;


...would get the height and width attributes even if it wasn't specified in the html.(See Point 3 in the link I posted eariler) I don't know though, it still doesn't seem to work when I linked it to images that are in the directory..
User is offlineProfile CardPM
+Quote Post

asadarnell
RE: Png Transparency Fix From <dic> Not Working For Me?
8 Oct, 2007 - 04:31 AM
Post #4

D.I.C Head
**

Joined: 30 Aug, 2007
Posts: 108


My Contributions
QUOTE(Israel @ 7 Oct, 2007 - 11:01 PM) *

Ok, I don't have an image called "blank" that was my bad because I had looked over about 7 examples and got a little tired I guess. However, I understood that:

CODE
imgWidth=obj.offsetWidth;
imgHeight=obj.offsetHeight;


...would get the height and width attributes even if it wasn't specified in the html.(See Point 3 in the link I posted eariler) I don't know though, it still doesn't seem to work when I linked it to images that are in the directory..

Here's what I have that works great. It's one conditional comment, so only IE6 reads it, and it adds very little to each page.
Here's what's in my <head> section:
CODE
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->


pngfix.js:
CODE

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


With this, you must set width/height.
User is offlineProfile CardPM
+Quote Post

Israel
RE: Png Transparency Fix From <dic> Not Working For Me?
8 Oct, 2007 - 12:03 PM
Post #5

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 626


Dream Kudos: 175
My Contributions
Thanks asadarnell, but I need something for when you have multiple transparencies on one page. I think yours only handles one per page. I saw in the <dic> post it does require width and height attributes to be set but I've just tried it and still no luck... Here's what I'm using now:

CODE
<script type="text/javascript">

function fixPngTransparency(obj){
    if(document.body.filters){
        pattern=/.png/gi;
      

filterFix="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ob

j.src+"',sizingMethod='scale');";
        if(obj.src.search(pattern)!=-1){
            obj.style.width=obj.offsetWidth+"432px";
            obj.style.height=obj.offsetHeight+"144px";
            obj.style.filter=filterFix;
            obj.src="./logo3.PNG";
        }
    }
}

</script>

</head>

<body>
<center>
<div align="center">
<img src="./logo3.PNG" alt="The Inn" width="432px" height="144px" onload="java script:fixPngTransparency(this);"></div>
<p class="one">106 South Main Somewhere, GA 55555 ~ <br />
e-mail ~ <a class="txt" href="mailto:someone@yahoo.com">

frontdesk@theinn.com</a></p>
User is offlineProfile CardPM
+Quote Post

asadarnell
RE: Png Transparency Fix From <dic> Not Working For Me?
8 Oct, 2007 - 02:03 PM
Post #6

D.I.C Head
**

Joined: 30 Aug, 2007
Posts: 108


My Contributions
QUOTE(Israel @ 8 Oct, 2007 - 01:03 PM) *

Thanks asadarnell, but I need something for when you have multiple transparencies on one page. I think yours only handles one per page. I saw in the <dic> post it does require width and height attributes to be set but I've just tried it and still no luck... Here's what I'm using now:

CODE
<script type="text/javascript">

function fixPngTransparency(obj){
    if(document.body.filters){
        pattern=/.png/gi;
      

filterFix="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ob

j.src+"',sizingMethod='scale');";
        if(obj.src.search(pattern)!=-1){
            obj.style.width=obj.offsetWidth+"432px";
            obj.style.height=obj.offsetHeight+"144px";
            obj.style.filter=filterFix;
            obj.src="./logo3.PNG";
        }
    }
}

</script>

</head>

<body>
<center>
<div align="center">
<img src="./logo3.PNG" alt="The Inn" width="432px" height="144px" onload="java script:fixPngTransparency(this);"></div>
<p class="one">106 South Main Somewhere, GA 55555 ~ <br />
e-mail ~ <a class="txt" href="mailto:someone@yahoo.com">

frontdesk@theinn.com</a></p>


The one I posted works for multiple pngs.
User is offlineProfile CardPM
+Quote Post

Israel
RE: Png Transparency Fix From <dic> Not Working For Me?
8 Oct, 2007 - 03:50 PM
Post #7

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 626


Dream Kudos: 175
My Contributions
Ok asadarnell, I'm trying it your way now but when I tried settting the height and width attributes like this in the javascript file:
CODE

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 + "432px; height:" + img.height + "144px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

and yes, I added the height and width attributes in the html as well along with:
CODE
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Everything on the page except the background image vanished?
User is offlineProfile CardPM
+Quote Post

asadarnell
RE: Png Transparency Fix From <dic> Not Working For Me?
8 Oct, 2007 - 04:24 PM
Post #8

D.I.C Head
**

Joined: 30 Aug, 2007
Posts: 108


My Contributions
QUOTE(Israel @ 8 Oct, 2007 - 04:50 PM) *

Ok asadarnell, I'm trying it your way now but when I tried settting the height and width attributes like this in the javascript file:
CODE

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 + "432px; height:" + img.height + "144px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

and yes, I added the height and width attributes in the html as well along with:
CODE
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Everything on the page except the background image vanished?

You don't specify it in the Javascript file, just in the HTML. What I posted is DIRECTLY from my website that I use it on. Don't change it. Just save the JS, and add the comment to the HTML.
User is offlineProfile CardPM
+Quote Post

Israel
RE: Png Transparency Fix From <dic> Not Working For Me?
8 Oct, 2007 - 08:09 PM
Post #9

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 626


Dream Kudos: 175
My Contributions
Ok, I tried it like you said and its still not working for me... Don't you have to also add an attribute to the html like:

CODE
onload="pngfix(this)"
User is offlineProfile CardPM
+Quote Post

Israel
RE: Png Transparency Fix From <dic> Not Working For Me?
9 Oct, 2007 - 09:06 PM
Post #10

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 626


Dream Kudos: 175
My Contributions
IT DOES WORK! My bad, I looked at in IE6 in Linux. Nobody really uses IE in Linux much so I'm happy! biggrin.gif
Thank you asadarnell! Thank you, Thank you, Thank YOU!
User is offlineProfile CardPM
+Quote Post

Israel
RE: Png Transparency Fix From <dic> Not Working For Me?
19 Oct, 2007 - 04:49 PM
Post #11

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 626


Dream Kudos: 175
My Contributions
Oh my god, this works perfectly when view locally on a machine but as soon as I get it up on a server it all goes blank? Anyone know what to do?
User is offlineProfile CardPM
+Quote Post

Israel
RE: Png Transparency Fix From <dic> Not Working For Me?
26 Oct, 2007 - 11:45 PM
Post #12

D.I.C Addict
Group Icon

Joined: 21 Nov, 2004
Posts: 626


Dream Kudos: 175
My Contributions
Well, here's what worked for me if anybody has the same problem.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/7/09 11:44PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month