By regx on

This works for me in Drupal 4.7 ( I am thinking of creating a module to handle this issue)

1. Download pngbehavior from: http://www.scss.com.au/images/pngbehavior.htc

2. upload a transparent 1x1 pixel gif called blank.gif to your theme I put mine in themes/bluemarine/images/blank.gif
Note: having non alphanumeric text in your theme dir name can cause problems

3. in pngbehavior.htc edit:
(line 7) to point to blank.gif

var blankSrc = "/site/themes/bluemarine/images/blank.gif";

and
(line 42) to use the image sizing method

      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                                     src + "',sizingMethod='image')";

4. Add the following to the top of your style.css

/* Handle PNGs in IE */
img, input{
   behavior: url("/site/themes/bluemarine/pngbehavior.htc");
}

That should do the trick!
I do not think this method handles stylesheet images correctly, but will handle all images placed in any of the theme.php files, php files in site content, the logo etc.

If you really need css placed images to work, let me know.
Also, you can find more information on PNG images in IE here
http://www.scss.com.au/family/andrew/webdesign/pngbehavior/
and the reference for alphaimageloader here
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alpha...

Comments

sangamreddi’s picture

sangamreddi commented

Civicspace theme has already supported it. anyway a module will be better for many people.

Sunny                      
www.gleez.com | www.sandeepone.com

Max Bell’s picture

Max Bell commented

Here's a quickie that uses javascript, but is easy to add to a theme...

http://www.howtocreate.co.uk/alpha.html

nyumbani_yangu’s picture

nyumbani_yangu commented

Hi, I'm developing a theme and need this alpha transparency capability for my png images.

At the moment I use this syntax in the CSS file:

.navigation_bg {
	background: url(images/primaryNavigationPanel.png);
	width:979px; 
	height:41px; 
	z-index:6; 
}

While in the tpl.php template file I try to use this class to style a

element... 
	<table border='1'  class="navigation_bg" >
		<tr>
			<td width="100%"> 
				<?php print $header; ?>
			</td>
		</tr>
	</table>

where the <?php print $header; ?> part just prints a nice_menus module generated menu into the header block...ù

The png file is basically a strip file (978 x 41 ) where I will have my menu printed on...

I have tried all types of solutions:

  • img behaviour CSS element, with the pngbehavior.htc script
  • other javascripts
  • filter:progid:DXImageTransform.Microsoft.Alpha(PARAMETERS) call

It just seems as if the fix for IE can only be done on images which are embedded through the Only local images are allowed. tag on the tpl.php template files..

I cannot 'fix' the alpha transparency if the image is referred to from the CSS file.. And I need this because I will have different style sheets for different screen resolutions..

Hope you can give me a hand on this, or anyone else who has had the same problem...

Really frustrating..

:(

Cheers

Simplicity is the ultimate sophistication, Leonardo da Vinci

regx’s picture

regx commented

I seem to remember using the MS alpha loader directly from CSS working fine.
I wanted to create a module for this, but the problem with doing so has to do with the way the ms alpha loader sizes the images.
Depending if the image is filler you need to stretch it as repeating doesn't seem to work, otherwise you have to set it to image.
So it is difficult to know what the user is wanting without making some pretty basic assumptions.

My personal Drupal site.
http://www.regx.dgswa.com/html/index.php