Topic awaiting preservation: Transparency dilemna. (Page 1 of 1)

I have developed a nifty toy but it uses the alpha filter. What are the current options for making this more cross browser compatible? I'm pretty sure Mozilla has a similar filter but what about Opera? Any thoughts on cross browser effects using the alpha filters? Thanks.

I've been somewhat out of the loop lately what with my daughter and all but the ideas have still been developing in my mind.

. . : slicePuzzle

-moz-opacity is the CSS equivalent of IE's filter:alpha(opacity=xx) - or whatever the new directX-based syntax (DXImageTransform or something?) is.
http://www.blooberry.com/indexdot/css/properties/extensions/nsextensions.htm

I think it has some quirks, but works pretty well overall.

Alpha transparency isn't possibly in opera unless you use .png images. Nor does it work in IE/Mac... At least I'm fairlt certain it doesn't.

Cross prowser scripting between IE and Mozilla isn't too hard though:

function setOpacity(id,o) {
obj = document.getElementById(id)
if (obj.filters) { obj.style.filter = "alpha(opacity=" + o + ")" }
else if (typeof obj.style.MozOpacity != "undefined") { obj.style.MozOpacity = (o/100) }
}

Although I was considering the idea of building a script that would provide some kind of flat colour background transparency across all browsers by using a series of variable opacity PNG images. Say 9 images from 10% to 90% 10px by 10px PNG images that you's set as a DIV's background image or if it supported CSS transparency then you'd use that instead.

The only problem with this is that I don't think all browsers will support PNG transpacency when it's set as a background image. I know IE/PC won't but we can use a CSS filter for that but whilst IE/Mac supports PNG with alpha I don't think it works as a backgorund image. Which means you'd need to set do some extra tricky stuff with containing elements and the like. After realising all of this I decided I had more pressing matters to worry about and didn't really giv it much mroe thought...

However, another idea I just thought of would be to have a PHP script that could build a flat colour PNG image on the fly at a given transparency/colour. I don't know how well that'd work if you specified the src for an image object as a php file. It might be worth a try though. It also makes the whole thing a little more worth while as you wouldn't have to make a series of images beforehand. You'd have to preload a serie of them if you wanted to animate any kind of alpha transition but it could be possible, that is if you can point to and assign a .php generated image from javascript. I'll have to play with that Idea when I get a chance.

Still, it is a bit of a streatch for such a simple thing, and beyond IE/PC and Mozilla the only browser that has any decent market share is IE/Mac, which makes it even less worthwhile really. On the other hand I would like to make a script that would make a div's background transparent but leave it's text at 100% opacity, which would require dynamically building containing elements anyhow.

Drac, did you view http://www.theflowerbuds.com/ in IE? If you didn't, please do and check out the section titles as they transition.

Yeah, I saw that. I'm a little confused why you pointed me to it though. I know IE can support transparency with it's alpha filter and PNG transparency through the alphaImage filter. I was mainly refering to how you'd go about building a fully cross-browser script for layer opacity control in all browsers that supported either 8-bit alpha PNG's or some kind of CSS/filter setting. Which would be just about every version 5+ browser.

For the IE/Win or Mozilla browsers you'd use the CSS/filter setting, for every other browser you'd script a PHP generated transparent PNG image instead. Like I said, something simple like a flat colour so that you could specify this in the image tag url or image object src which points to a php script that will automagically create and return and image file based on the JS generated parameters you sent it.

The only thing I'm not too sure of is if you can get PHP to properly return an image, but I've done this using an image tag pointing to a php script before. Suho's also doing a similar thing to generate a random message for his fortune cookie sig.