Transparency Issues.

Jed K · 12-13-2004, 09:03 PM

Hello,
????: NamePros.com http://www.namepros.com/web-design-discussion/59722-transparency-issues.html

Basically, I need to know if the only formats you can use to save a transparent image for the web are .png and .gif? I was going to just use .png, but Internet Explorer doesn't seem to support .png transparency, unfortunately (Firefox does, though). So, the next logical step would be to use .gif instead, but... the .gif quality of images is just too damn low for what I want to do.

So... any suggestions?
-I am using Adobe Photoshop CS.

If this should be posted under the graphic section of the forums, feel free to move it; however, since it kind of involves browser compatibility/etc, I figured it would be okay to put it here.

---

EDIT - I've been searching around, and I've found a couple different fixes that allow IE5.5 and higher to see .png images as they are meant to be seen; however, I am not sure what fix to go with. There are some Javascript fixes, as well as some PHP fixes, and I am unable to figure out which method is best.

Any help on this with examples of personal experience would be greatly appreciated.

Jed K · 12-14-2004, 02:54 AM

Here are some fixes that I've found so far...

http://www.skyzyx.com/scripts/sleight.php
http://www.koivi.com/ie-png-transparency/
http://homepage.ntlworld.com/bobosola/

...but now, what I'm trying to figure out is which of these offers the best solution to the problem. I believe that two of them are based off of Javascript, while one is based off of PHP. I am not sure which of these is the best choice..! I am really hoping someone here can post their experiences with any of these (or one I have yet to find), and steer me in the right direction (with the pros and cons or whatnot/etc).
????: NamePros.com http://www.namepros.com/showthread.php?t=59722

Thanks again.

adam_uk · 12-14-2004, 01:37 PM

use sleight
i used that and theres a mod for which whcih allows for for png transparency on backgrounds

Jed K · 12-14-2004, 03:16 PM

Thanks.

I went ahead and tried out the Sleight fix, and it worked without any problems. The coding is very simple, and it's extremely easy to setup.

Unfortunately, I have some concerns with it, though.
For example, since it's a Javascript fix, those without Javascript enabled won't see my .PNG images as they are meant to be seen. So, should I just say 'screw it' and exclude those 10%'ish of viewers without it, or what?
????: NamePros.com http://www.namepros.com/showthread.php?t=59722

I would install the PHP solution, but it's just too damn complicated for me (and I'm not sure if it's a quality fix or not).
-I am not sure how to go about implementing it correctly, so, help would be appreciated.

cerebus · 12-14-2004, 03:50 PM

Both the first fixes seems to apply the very same fix. Difference being sleight is javacript dependant. No question about it, fix number 2 is better to use.

Jed K · 12-14-2004, 04:08 PM

Okay... if I am going to use the PHP fix, I am going to need a little bit of help here (please).

---

On the site with the PHP fix, it says:
At the top of the files that you want to use this function with, paste the following code:

PHP Code:

<?php ob_start(); ?>

Now, at the bottom of this file, paste the following lines of code:
????: NamePros.com http://www.namepros.com/showthread.php?t=59722

PHP Code:

  <?php

????: NamePros.com http://www.namepros.com/showthread.php?t=59722
    include_once 'replacePngTags.php';

    echo replacePngTags(ob_get_clean());

?>

So, I guess my first question is: what exactly do they mean by "top" and "bottom"? Does it want me to add the first line of code before the opening <html> tag, and the last line of code after the concluding <html> tag?
...or does it want me to add both lines of code inside of the <body> tag (at the beginning and end)?

---

My second (and last) question is about this line of code that I found in their index.php file that's included in the full source download (http://www.koivi.com/ie-png-transparency.zip) they provide.

PHP Code:

  <?php echo replacePngTags('<img src="test.png" alt="PNG-24 image with transparency" title="PNG-24 image with transparency" style="float: left; margin: 15px;" />'),"\n"; ?>

What in the heck is this about? I don't understand the whole style="float: left; margin: 15px;" thing. Is that supposed to always be the same? Or do I modify it with each image? And, if I am supposed to modify it with each image, how do I go about doing so?

---

Free NameBucks to the first person that can successfully help me out with this.
-Thanks.

cerebus · 12-14-2004, 07:43 PM

Top means top and bottom means bottom. Nothing below or above those pasted parts.

As for the full source download I'm pretty sure you dont want to care about it all. It's just code samples.

Downloading replacePngTags.php and pasting the lines into the files with transparent PNG files is enough. Don't bother to add anything at all to files which do not feature transparent PNGs, it will only add overhead.

If the file in which you are pasting the lines is not in the same folder as replacePngTags.php you will need to edit the path inside of include_once('');

primacomputer · 12-15-2004, 02:51 AM

I would avoid any javascript fixes. More and more people are blocking it.

Fixing it server side seems ideal but there are issues. Some people (browsers, firewalls or proxy servers) do not provide user agent data. There’s also the issue of re-parsing the script in script, which is a substantial overhead. Also, I have only seen PHP code freely available. It is possible in ASP but apparently you have to write your own.

Using styles is cumbersome. It has a few issues as well. The only one that ever really bothered me is that you can’t right click and save the image, but most people actually find that a plus. The advantage of styles is that it relies on the browser to figure out what styles to use and what to ignore, so it works regardless of user agent data. The disadvantage is that a simple change in how browsers handle style sheets could render your website completely unusable.
????: NamePros.com http://www.namepros.com/showthread.php?t=59722

I find styles the easiest to use. I wrote a script that converts table backgrounds into styles. This way the kids can lay out their stuff in DW preview it on Mozilla, and then batch process it to test in IE.

Jed K · 12-15-2004, 12:11 PM

Okay, well... if I don't include the style part of the <php echo> tag, how should it look? Like this?

PHP Code:

<?php echo replacePngTags('<img src="test.png" alt="Whatever" />'),"\n"; ?>

Or do I not even need to use the <php echo> input when calling for my .png images?

I'm sorry for all of my questions. I am just getting back into web design after over a year break, and I am kind of rusty on things, so... if some of my questions seem stupid, I apologize.
????: NamePros.com http://www.namepros.com/showthread.php?t=59722
-This should be the last of them, though.

EDIT - Okay, that didn't work. All that ended up showing on the page was '),"\n"; ?>

I'm about to give up and just use the easy Javascript solution -_-... but I really don't want to.

cerebus · 12-15-2004, 05:07 PM

If it ended up showing parts of the PHP code that means the file (extension) isn't parsed for PHP. Try renaming the file to .php (or specify an Addtype for the extension you are using -apache specific)

Jed K · 12-15-2004, 05:55 PM

Yeah, I made the stupid mistake of forgetting to rename my index file with a .php extension; however, after doing so, I still came up with another problem, and got this error: Call to undefined function: replacepngtags(), even though I uploaded all of the files to the write location/etc. I'm not sure what that's all about...

I thought maybe it was a simple thing that I needed to change in the replacePngTags.php file, but I just don't understand PHP well enough to go messing with that/etc.

I'm sure at this point you are getting irritated with having to help me out, so, if you don't feel like responding anymore, that's fine... and I'll just use the Javascript one. But, if you do... that'd be great.
????: NamePros.com http://www.namepros.com/showthread.php?t=59722

Thanks.

cerebus · 12-15-2004, 06:06 PM

Function names are case sensitive, the function is named replacePngTags whilst your error says replacepngtags

Jed K · 12-15-2004, 06:48 PM

I realize that.
-I used replacePngTags when I called it, which is why this error made no sense to me whatsoever.

cerebus · 12-15-2004, 07:48 PM

Place <? include_once 'replacePngTags.php'; ?> at the top of your page and it ought to work.

Jed K · 12-15-2004, 08:05 PM

Well, first of all... do you want me to use that as opposed to <?php ob_start(); ?> that the site said to use? Second, did you mean to include a php in your line of code, and have it be <?php etc/etc..?

I tried including the line of code you gave me (as a substitute for the one the site gave) with the <?php in the beginning, and It's trying to load spacer.png from http://spacer.png

-I looked in the replacePngTags.php file for a path that may need adjusting, but it seemed like it was correct, so... I'm not sure.

This is frustrating.

cerebus · 12-15-2004, 08:32 PM

If you start the file with <?php ob_start();?> and end it with the 2 lines as said in the page, you shouldn't add anything extra more than that. Let the rest remain pure HTML and just add images as you would with any other HTML page (<img src="this.png" moreattributes>).
????: NamePros.com http://www.namepros.com/showthread.php?t=59722

To call replace_Png_Tags with <? echo is an alternative to that method. To use it you would leave out the the lines included in the head and bottom of the file as you did the previous method, and just include the replacePngTags.php at the top. With this method you would need to call the <?echo replace_Png_Tags.. for each and every inclusion of a PNG.

The first method is the simplest that I would suggest to you.

Jed K · 12-15-2004, 08:49 PM

Ok, but it is still trying to load spacer.png from http://spacer.png - what do I do about this?

Also, in the replacePhpTags.php file, what do these lines of code mean?

PHP Code:

      // find all the png images in backgrounds

    preg_match_all('/background-image:\s*url\(\'(.*\.png)\'\);/Uis',$x,$background);

????: NamePros.com http://www.namepros.com/showthread.php?t=59722
    for($i=0;$i<count($background[0]);$i++){

        // simply replace:

        //  "background-image: url('image.png');"

        // with:

        //  "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(

        //      enabled=true, sizingMethod=scale src='image.png');"

????: NamePros.com http://www.namepros.com/showthread.php?t=59722
        // I don't think that the background-repeat styles will work with this...

        $x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'.

                'Microsoft.AlphaImageLoader(enabled=true, sizingMethod='.$sizeMeth.

                ' src=\''.$background[1][$i].'\');',$x);

    }

Is there something else I am supposed to modify? Because the comments say to replace something with something else...

If you have AIM by any chance, could you please PM me your screen-name? It would make this a lot quicker/easier if I could just talk to you directly for a couple of minutes.

Thanks.

cerebus · 12-15-2004, 11:28 PM

Afraid I don't have aim.

I take a quick look at the code and from what I saw I think your server variable DOCUMENT_ROOT returns http://

Fix it by adding:

PHP Code:

  $imgpath="path_to_folder_with_space_png/";

at the very top of replacepngtags.php. The path could be either "http://www.domain.com/img/"- or "/img/"-style, where img is the directory in which you have the spacer.png
????: NamePros.com http://www.namepros.com/showthread.php?t=59722

The code block you pasted does some replacing to allow transparent PNG's as background images, specified by css.

Jed K · 12-16-2004, 01:15 AM

Okay, I finally got it working. It's kind of irritating, because all I needed to do was add a "/" in this line of code:
function replacePngTags($x,$img_path='/',$sizeMeth='scale'){

On the $img_path part, the file had it as $img_path=' '
...all that was needed was the damn /

Thanks a ton for all your help.
-NameBucks have already been donated, but I'll likely donate a few more.

Calvin · 12-17-2004, 07:13 PM

Another thing to consider... you said that the quality of the GIF is too low. In PS you can set the palette size and dithering options to attain as good as you like. The biggest plus in favor of going to PNG is the support for more than 1-bit transparency, allowing you to blend with the background, rather than just simple masking like in GIF.

Cal.

12-13-2004, 09:03 PM	THREAD STARTER #1 (permalink)
Jed K o-re-sa-ma Join Date: Jun 2003 Posts: 1,620	Transparency Issues. Hello, ????: NamePros.com http://www.namepros.com/web-design-discussion/59722-transparency-issues.html Basically, I need to know if the only formats you can use to save a transparent image for the web are .png and .gif? I was going to just use .png, but Internet Explorer doesn't seem to support .png transparency, unfortunately (Firefox does, though). So, the next logical step would be to use .gif instead, but... the .gif quality of images is just too damn low for what I want to do. So... any suggestions? -I am using Adobe Photoshop CS. If this should be posted under the graphic section of the forums, feel free to move it; however, since it kind of involves browser compatibility/etc, I figured it would be okay to put it here. --- EDIT - I've been searching around, and I've found a couple different fixes that allow IE5.5 and higher to see .png images as they are meant to be seen; however, I am not sure what fix to go with. There are some Javascript fixes, as well as some PHP fixes, and I am unable to figure out which method is best. Any help on this with examples of personal experience would be greatly appreciated. Last edited by Jed K; 12-13-2004 at 10:10 PM.

12-14-2004, 04:08 PM	THREAD STARTER #6 (permalink)
Jed K o-re-sa-ma Join Date: Jun 2003 Posts: 1,620	Okay... if I am going to use the PHP fix, I am going to need a little bit of help here (please). --- On the site with the PHP fix, it says: At the top of the files that you want to use this function with, paste the following code: PHP Code: `<?php ob_start(); ?>` Now, at the bottom of this file, paste the following lines of code: ????: NamePros.com http://www.namepros.com/showthread.php?t=59722 PHP Code: `<?php ????: NamePros.com http://www.namepros.com/showthread.php?t=59722 include_once 'replacePngTags.php'; echo replacePngTags(ob_get_clean()); ?>` So, I guess my first question is: what exactly do they mean by "top" and "bottom"? Does it want me to add the first line of code before the opening <html> tag, and the last line of code after the concluding <html> tag? ...or does it want me to add both lines of code inside of the <body> tag (at the beginning and end)? --- My second (and last) question is about this line of code that I found in their index.php file that's included in the full source download (http://www.koivi.com/ie-png-transparency.zip) they provide. PHP Code: `<?php echo replacePngTags('<img src="test.png" alt="PNG-24 image with transparency" title="PNG-24 image with transparency" style="float: left; margin: 15px;" />'),"\n"; ?>` What in the heck is this about? I don't understand the whole style="float: left; margin: 15px;" thing. Is that supposed to always be the same? Or do I modify it with each image? And, if I am supposed to modify it with each image, how do I go about doing so? --- Free NameBucks to the first person that can successfully help me out with this. -Thanks. Last edited by Jed K; 12-14-2004 at 04:23 PM.

12-15-2004, 12:11 PM	THREAD STARTER #9 (permalink)
Jed K o-re-sa-ma Join Date: Jun 2003 Posts: 1,620	Okay, well... if I don't include the style part of the <php echo> tag, how should it look? Like this? PHP Code: `<?php echo replacePngTags('<img src="test.png" alt="Whatever" />'),"\n"; ?>` Or do I not even need to use the <php echo> input when calling for my .png images? I'm sorry for all of my questions. I am just getting back into web design after over a year break, and I am kind of rusty on things, so... if some of my questions seem stupid, I apologize. ????: NamePros.com http://www.namepros.com/showthread.php?t=59722 -This should be the last of them, though. EDIT - Okay, that didn't work. All that ended up showing on the page was '),"\n"; ?> I'm about to give up and just use the easy Javascript solution -_-... but I really don't want to. Last edited by Jed K; 12-15-2004 at 12:25 PM.

12-15-2004, 08:49 PM	THREAD STARTER #17 (permalink)
Jed K o-re-sa-ma Join Date: Jun 2003 Posts: 1,620	Ok, but it is still trying to load spacer.png from http://spacer.png - what do I do about this? Also, in the replacePhpTags.php file, what do these lines of code mean? PHP Code: // find all the png images in backgrounds preg_match_all('/background-image:\surl\(\'(.\.png)\'\);/Uis',$x,$background); ????: NamePros.com http://www.namepros.com/showthread.php?t=59722 for($i=0;$i<count($background[0]);$i++){ // simply replace: // "background-image: url('image.png');" // with: // "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( // enabled=true, sizingMethod=scale src='image.png');" ????: NamePros.com http://www.namepros.com/showthread.php?t=59722 // I don't think that the background-repeat styles will work with this... $x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'. 'Microsoft.AlphaImageLoader(enabled=true, sizingMethod='.$sizeMeth. ' src=\''.$background[1][$i].'\');',$x); } Is there something else I am supposed to modify? Because the comments say to replace something with something else... If you have AIM by any chance, could you please PM me your screen-name? It would make this a lot quicker/easier if I could just talk to you directly for a couple of minutes. Thanks.

12-15-2004, 11:28 PM	#18 (permalink)
cerebus NamePros Regular Join Date: Oct 2003 Location: Sweden Posts: 395	Afraid I don't have aim. I take a quick look at the code and from what I saw I think your server variable DOCUMENT_ROOT returns http:// Fix it by adding: PHP Code: `$imgpath="path_to_folder_with_space_png/";` at the very top of replacepngtags.php. The path could be either "http://www.domain.com/img/"- or "/img/"-style, where img is the directory in which you have the spacer.png ????: NamePros.com http://www.namepros.com/showthread.php?t=59722 The code block you pasted does some replacing to allow transparent PNG's as background images, specified by css.

	NamePros Design Contests	Forum Sponsorship
	Join in on the FUN! You can start an affordable design contest and pick from entries talented members submit or you can enter a design contest for a chance to win CASH PRIZES! What are you waiting for? Get started in the fun TODAY! - Banners, Logos, Mascots, and MORE! (Please READ the design Contest section rules Prior to starting or entering a contest)

12-14-2004, 02:54 AM	THREAD STARTER #2 (permalink)
Jed K o-re-sa-ma Join Date: Jun 2003 Posts: 1,620	Here are some fixes that I've found so far... http://www.skyzyx.com/scripts/sleight.php http://www.koivi.com/ie-png-transparency/ http://homepage.ntlworld.com/bobosola/ ...but now, what I'm trying to figure out is which of these offers the best solution to the problem. I believe that two of them are based off of Javascript, while one is based off of PHP. I am not sure which of these is the best choice..! I am really hoping someone here can post their experiences with any of these (or one I have yet to find), and steer me in the right direction (with the pros and cons or whatnot/etc). ????: NamePros.com http://www.namepros.com/showthread.php?t=59722 Thanks again.

12-14-2004, 01:37 PM	#3 (permalink)
adam_uk Senior Member Join Date: May 2003 Posts: 2,187	use sleight i used that and theres a mod for which whcih allows for for png transparency on backgrounds

12-14-2004, 03:16 PM	THREAD STARTER #4 (permalink)
Jed K o-re-sa-ma Join Date: Jun 2003 Posts: 1,620	Thanks. I went ahead and tried out the Sleight fix, and it worked without any problems. The coding is very simple, and it's extremely easy to setup. Unfortunately, I have some concerns with it, though. For example, since it's a Javascript fix, those without Javascript enabled won't see my .PNG images as they are meant to be seen. So, should I just say 'screw it' and exclude those 10%'ish of viewers without it, or what? ????: NamePros.com http://www.namepros.com/showthread.php?t=59722 I would install the PHP solution, but it's just too damn complicated for me (and I'm not sure if it's a quality fix or not). -I am not sure how to go about implementing it correctly, so, help would be appreciated.

12-14-2004, 03:50 PM	#5 (permalink)
cerebus NamePros Regular Join Date: Oct 2003 Location: Sweden Posts: 395	Both the first fixes seems to apply the very same fix. Difference being sleight is javacript dependant. No question about it, fix number 2 is better to use.

12-14-2004, 07:43 PM	#7 (permalink)
cerebus NamePros Regular Join Date: Oct 2003 Location: Sweden Posts: 395	Top means top and bottom means bottom. Nothing below or above those pasted parts. As for the full source download I'm pretty sure you dont want to care about it all. It's just code samples. Downloading replacePngTags.php and pasting the lines into the files with transparent PNG files is enough. Don't bother to add anything at all to files which do not feature transparent PNGs, it will only add overhead. If the file in which you are pasting the lines is not in the same folder as replacePngTags.php you will need to edit the path inside of include_once('');

12-15-2004, 02:51 AM	#8 (permalink)
primacomputer Senior Member Join Date: Mar 2004 Posts: 1,402	I would avoid any javascript fixes. More and more people are blocking it. Fixing it server side seems ideal but there are issues. Some people (browsers, firewalls or proxy servers) do not provide user agent data. There’s also the issue of re-parsing the script in script, which is a substantial overhead. Also, I have only seen PHP code freely available. It is possible in ASP but apparently you have to write your own. Using styles is cumbersome. It has a few issues as well. The only one that ever really bothered me is that you can’t right click and save the image, but most people actually find that a plus. The advantage of styles is that it relies on the browser to figure out what styles to use and what to ignore, so it works regardless of user agent data. The disadvantage is that a simple change in how browsers handle style sheets could render your website completely unusable. ????: NamePros.com http://www.namepros.com/showthread.php?t=59722 I find styles the easiest to use. I wrote a script that converts table backgrounds into styles. This way the kids can lay out their stuff in DW preview it on Mozilla, and then batch process it to test in IE.

12-15-2004, 05:07 PM	#10 (permalink)
cerebus NamePros Regular Join Date: Oct 2003 Location: Sweden Posts: 395	If it ended up showing parts of the PHP code that means the file (extension) isn't parsed for PHP. Try renaming the file to .php (or specify an Addtype for the extension you are using -apache specific)

12-15-2004, 05:55 PM	THREAD STARTER #11 (permalink)
Jed K o-re-sa-ma Join Date: Jun 2003 Posts: 1,620	Yeah, I made the stupid mistake of forgetting to rename my index file with a .php extension; however, after doing so, I still came up with another problem, and got this error: Call to undefined function: replacepngtags(), even though I uploaded all of the files to the write location/etc. I'm not sure what that's all about... I thought maybe it was a simple thing that I needed to change in the replacePngTags.php file, but I just don't understand PHP well enough to go messing with that/etc. I'm sure at this point you are getting irritated with having to help me out, so, if you don't feel like responding anymore, that's fine... and I'll just use the Javascript one. But, if you do... that'd be great. ????: NamePros.com http://www.namepros.com/showthread.php?t=59722 Thanks.

12-15-2004, 06:06 PM	#12 (permalink)
cerebus NamePros Regular Join Date: Oct 2003 Location: Sweden Posts: 395	Function names are case sensitive, the function is named replacePngTags whilst your error says replacepngtags

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

12-15-2004, 06:48 PM	THREAD STARTER #13 (permalink)
Jed K o-re-sa-ma Join Date: Jun 2003 Posts: 1,620	I realize that. -I used replacePngTags when I called it, which is why this error made no sense to me whatsoever.

12-15-2004, 07:48 PM	#14 (permalink)
cerebus NamePros Regular Join Date: Oct 2003 Location: Sweden Posts: 395	Place <? include_once 'replacePngTags.php'; ?> at the top of your page and it ought to work.

12-15-2004, 08:05 PM	THREAD STARTER #15 (permalink)
Jed K o-re-sa-ma Join Date: Jun 2003 Posts: 1,620	Well, first of all... do you want me to use that as opposed to <?php ob_start(); ?> that the site said to use? Second, did you mean to include a php in your line of code, and have it be <?php etc/etc..? I tried including the line of code you gave me (as a substitute for the one the site gave) with the <?php in the beginning, and It's trying to load spacer.png from http://spacer.png -I looked in the replacePngTags.php file for a path that may need adjusting, but it seemed like it was correct, so... I'm not sure. This is frustrating.

12-15-2004, 08:32 PM	#16 (permalink)
cerebus NamePros Regular Join Date: Oct 2003 Location: Sweden Posts: 395	If you start the file with <?php ob_start();?> and end it with the 2 lines as said in the page, you shouldn't add anything extra more than that. Let the rest remain pure HTML and just add images as you would with any other HTML page (<img src="this.png" moreattributes>). ????: NamePros.com http://www.namepros.com/showthread.php?t=59722 To call replace_Png_Tags with <? echo is an alternative to that method. To use it you would leave out the the lines included in the head and bottom of the file as you did the previous method, and just include the replacePngTags.php at the top. With this method you would need to call the <?echo replace_Png_Tags.. for each and every inclusion of a PNG. The first method is the simplest that I would suggest to you.

12-16-2004, 01:15 AM	THREAD STARTER #19 (permalink)
Jed K o-re-sa-ma Join Date: Jun 2003 Posts: 1,620	Okay, I finally got it working. It's kind of irritating, because all I needed to do was add a "/" in this line of code: function replacePngTags($x,$img_path='/',$sizeMeth='scale'){ On the $img_path part, the file had it as $img_path=' ' ...all that was needed was the damn / Thanks a ton for all your help. -NameBucks have already been donated, but I'll likely donate a few more.

12-17-2004, 07:13 PM	#20 (permalink)
Calvin New Member Join Date: Nov 2004 Posts: 7	Another thing to consider... you said that the quality of the GIF is too low. In PS you can set the palette size and dithering options to attain as good as you like. The biggest plus in favor of going to PNG is the support for more than 1-bit transparency, allowing you to blend with the background, rather than just simple masking like in GIF. Cal.