PNG32 Transparency Issues for input tag

Need help with Photoshop, the GIMP, Illustrator, or others? Want to show off your work? Looking for advice on your newest Flash stuff?

Moderator: General Moderators

Post Reply
User avatar
icarpenter
Forum Commoner
Posts: 84
Joined: Mon Mar 07, 2005 8:12 am
Location: Kent, England

PNG32 Transparency Issues for input tag

Post by icarpenter »

Hi can anyone help

I am using a PNG32 image as the source for an <input> tag as follows...

Code: Select all

<script> 
	function mouseOver(ellementID,imagePath)	{		
			document.getElementById(ellementID).src = imagePath
		}
	function mouseOut(ellementID,imagePath)	{
			document.getElementById(ellementID).src = imagePath
		}
</script> 
<form>
<input type="image" onMouseOver="mouseOver('1,'myimage_on.png')" onMouseOut="mouseOut('1','myimage_off.png')" id="1" src="myimage_off.png" />
</form>
Both Images have transparent backgrounds...but the transparency in IE shows as a grey block...

I have other images using the <image> tag which I can resolve with a peice of javascript below...

But I cannot get the images for the <input> tag to show transparency and hover/replace with another image also with transparency

Has anyone come accross this before...

any help would be greatly appreciated!!

Ian.

Code: Select all

function correctPNG() 
   {
   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);
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Extremely well known issue in IE... one of the most well known of all it's irritating little bugs.

There's a standards-breaking way to fix it yes but it's gonna be hella tricky if you're using it in a rollover effect.

Code: Select all

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='the_transparent_png.png', sizingMethod='scale');
You need that CSS applied, *for IE Only* -- put it in a conditional comment.

You also need to throw a clear GIF or such-like over the top of it to hold the shape in place.

Code: Select all

<!-- [if IE]>
<input blah blah blah MSIE stuff />
<![endif]-->
Welcome to MSIE hell :twisted:
foobar
Forum Regular
Posts: 613
Joined: Wed Sep 28, 2005 10:08 am

Post by foobar »

Good stuff. I found this useful in a(-nother) chat application I'm developing for wez. I used PNGs with nice gradient transparence, which were meant to look good, but ended up looking awful in IE.

A drawback of the script that icarpenter posted is that it slows down IE considerably. :?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

foobar wrote:Good stuff. I found this useful in a(-nother) chat application I'm developing for wez. I used PNGs with nice gradient transparence, which were meant to look good, but ended up looking awful in IE.

A drawback of the script that icarpenter posted is that it slows down IE considerably. :?
Yeah you also would only truly benefit from that script if all your visitors have JS enabled and you have quite a few transparent png's to change. That's a lot of wasted code for just one (or two) single PNG's considering all you have to do is conditionally apply a MS filter if the browser is IE, and make the box (or image) it's applied to, transparent.

If you want a way to do that whole search/replace gaff without relying on JS you can do it on the server with PHP :)

http://koivi.com/ie-png-transparency/
yorgonader
Forum Newbie
Posts: 1
Joined: Thu Nov 20, 2008 5:22 am

Re: PNG32 Transparency Issues for input tag

Post by yorgonader »

The problem is that IE surprisingly display all images in PNG format a bit darker than what they should be. Just use JPG format and it should work fine. The same problem happened to me and I fixed it by changing the the pictures format to JPG. Good Luck!!!
User avatar
kaisellgren
DevNet Resident
Posts: 1675
Joined: Sat Jan 07, 2006 5:52 am
Location: Lahti, Finland.

Re: PNG32 Transparency Issues for input tag

Post by kaisellgren »

Just gave up. Gave up. IE is not worth supporting ;)

Seriously, why would you want to support something like IE? The faster we stop supporting it the faster people will leave IE and use a modern browser. :)
rase2008
Forum Newbie
Posts: 3
Joined: Sat Feb 14, 2009 12:11 pm

MS filter if the browser is IE

Post by rase2008 »

visitors have JS enabled and you have quite a few transparent png's to change. That's a lot of wasted code for just one (or two) single PNG's considering all you have to do is conditionally apply a MS filter if the browser is IE, and make the box (or image) it's applied to, transparent.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: PNG32 Transparency Issues for input tag

Post by Benjamin »

kaisellgren wrote:Just gave up. Gave up. IE is not worth supporting ;)

Seriously, why would you want to support something like IE? The faster we stop supporting it the faster people will leave IE and use a modern browser. :)
"How do I download the Internets?"
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: PNG32 Transparency Issues for input tag

Post by John Cartwright »

astions wrote:
kaisellgren wrote:Just gave up. Gave up. IE is not worth supporting ;)

Seriously, why would you want to support something like IE? The faster we stop supporting it the faster people will leave IE and use a modern browser. :)
"How do I download the Internets?"
Alt+f4 :)
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: PNG32 Transparency Issues for input tag

Post by Benjamin »

LOL, I actually did that, wanted to see what it would do.
User avatar
kaisellgren
DevNet Resident
Posts: 1675
Joined: Sat Jan 07, 2006 5:52 am
Location: Lahti, Finland.

Re: PNG32 Transparency Issues for input tag

Post by kaisellgren »

astions wrote:LOL, I actually did that, wanted to see what it would do.
Have you tried:

Start -> Run... -> cmd -> del c:\windows\win.ini

That's how you download the Internet :P
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: PNG32 Transparency Issues for input tag

Post by John Cartwright »

astions wrote:LOL, I actually did that, wanted to see what it would do.
Victim #2434324231323944
Post Reply