Another .png problem, but with a twist - Tech Support Forums

webtechie · December 7th, 2004, 06:42 PM

We've been dealing with images that have a high transparent to pixeled content. In everything but IE there doesn't seem to be a problem, but in IE - you can only click on the link if your mouse is over a pixel. A problem when dealing with footer images where transparency / resolution is key, but pixels are few and far between. Have you ran into any solution for this? Or must we wait (and continue waiting) on MS to pull their heads out of their ya-ya's?

Blazer06 · December 7th, 2004, 07:23 PM

link?

Blaze

webtechie · December 7th, 2004, 10:03 PM

Ahh, yeah sorry about not giving a 'working' example. Should be able to follow the link below and see what I mean.

http://www.phylo.com/png/footer.htm

I tried using a .gif either above (z-index) or below the .png's in order to fill the transparency, but neither idea worked - so ignore the extra callouts in the source. That's why they are there.

paul9 · December 7th, 2004, 10:07 PM

i'm fairly sure i saw outpatient state that ie has problems with png (i think it was specifically transparencies) in one of his posts. this sounds like that problem in action. i don't recall him posting a workaround though

paul9 · December 7th, 2004, 10:13 PM

i wasn't quite right, but here: http://www.techimo.com/forum/t128127.html

webtechie · December 7th, 2004, 10:19 PM

Yeah, I've been able to implement the .png fix so that I don't get a solid grey where the transparency is suppose to be (even found a way to fix on the server side so sp2 can't disable the java) but now we're left with the linking problem. It's almost like the java (for IE) cuts all transparent pixels completely. I know nothing about Java (perhaps time to learn) so I don't know if there is a way to turn them truely transparent or not. Hope that makes sense. Not feeling all that great. Weeee... =/

OuTpaTienT · December 7th, 2004, 10:34 PM

There is a workaround for the IE/PNG problem. You have include a small script in your html document then IE will display the transparency properly. Now I don't know if it'll also make the hotspots of the link correct like you want it to be...but all you can do is try it and find out.

Here is the script that needs to be in the <head> section of the document. You can either put all this text in each html document that needs it or you can put it in a seperate file and use css to call that file.

Code:

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   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);
</script>
<![endif]-->

An example of transparency working correctly can be seen here. Scroll the page and you should be able to see the background through the first of three banners.

webtechie · December 8th, 2004, 02:35 AM

Yeah, the problem isn't getting IE to display the transparency - I've taken care of that with the linked javascript file www.phylo.com/png/javascript.js but with links in conjunction with .png's in IE. Following the footer.htm link above - you can see it in action. In IE if you cursor over a non-transparent pixel the background changes like it should, but any transparent pixels are basically non-existent.

The desired effect is basically to similate rollover images without the overhead of creating color specific images for each and every site. Change the color via the stylesheet and roll. Not proving as time saving as hoped for however.