Transparency Issues.

Miyavi · Dec 14, 2004

Hello,

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.

Miyavi · Dec 14, 2004

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).

Thanks again.

adam_uk · Dec 14, 2004

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

Miyavi · Dec 14, 2004

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?

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 · Dec 14, 2004

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.

Miyavi · Dec 15, 2004

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:

<?php ob_start(); ?>

Now, at the bottom of this file, paste the following lines of code:

PHP:

<?php
    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:

<?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 · Dec 15, 2004

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 · Dec 15, 2004

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.

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.

Miyavi · Dec 15, 2004

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

PHP:

<?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.
-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 · Dec 16, 2004

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)

Miyavi · Dec 16, 2004

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.

Thanks.

cerebus · Dec 16, 2004

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

Miyavi · Dec 16, 2004

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

cerebus · Dec 16, 2004

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

Miyavi · Dec 16, 2004

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 · Dec 16, 2004

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>).

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.

Miyavi · Dec 16, 2004

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:

    // find all the png images in backgrounds
    preg_match_all('/background-image:\s*url\(\'(.*\.png)\'\);/Uis',$x,$background);
    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');"
        // 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 · Dec 16, 2004

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:

$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

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

Miyavi · Dec 16, 2004

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 · Dec 18, 2004

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.

Transparency Issues.

o-re-sa-maVIP Member

o-re-sa-maVIP Member

Established Member

o-re-sa-maVIP Member

Established Member

o-re-sa-maVIP Member

Established Member

Established Member

o-re-sa-maVIP Member

Established Member

o-re-sa-maVIP Member

Established Member

o-re-sa-maVIP Member

Established Member

o-re-sa-maVIP Member

Established Member

o-re-sa-maVIP Member

Established Member

o-re-sa-maVIP Member

New Member

trafficload.com

OwnForm.com

Leggings.gr

eNuns.com

jnuw.com

FortEquity.com

BeyondOffice.com

Secondary.co

BusinessBay.Property

ManageYourDebt.org

Similar threads

We're social

trafficload.com

OwnForm.com

Leggings.gr

eNuns.com

jnuw.com

FortEquity.com

BeyondOffice.com

Secondary.co

BusinessBay.Property

ManageYourDebt.org

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling