I'm facing a problem, when setting opacity in Sidebar Gadget. Gadget gets the opacity, but it has purple background instead of it's parent (body) background.
Web Gadget is working correctly by setting the alpha filter, but Sidebar Gadget is not displayed correctly - no matter whether I'm using oObj.style.filter = "alpha(opacity=[int value])"; or System.Gadget.opacity = [int value].
Opacity in Sidebar Gadget
Boris Zakharin
HMCSharon
Thank you for the answers.
I realised earlier that solution similar to khamlon's example is the best way of doing that. My problem occurred when setting a partial transparency on separate section of gadget. Thus I'd have had to add a separate, non-transparent background to that section.
I kept it simple: the partial transparency wasn't essential, so I left it out from the Sidebar Gadget and applied it only into web, where it works correctly.
However, the whole process taught me some other important lessons of distinction between Vista Gadgets and "normal" application development on web ;).
ernisj
there's a way to use transparency in gadgets with the <g:background /> but that request some tweak :
you'll need 3 pictures :
then use it like this :
<g:background src="images/black_background.png" id="gadgetBg" style="position:absolute;left:0;width:130px;height:130px;top:0;z-index:-999;" />
<img id="dropHere" src="images/white_background.png" style="z-index:10;"/>
and in the onload function of your gadget put this :
gadgetBg.addImageObject("images/myBackground.png",0,0);
SameerNSameer
What is "totally black transparent" and "totally white transparent picutre"
I never makes semi-transparent png works...unless it is inserted into g:background and have a non-transparent pixel below it.
Tim Dallmann
Forget that trick, I don't see what it's supposed to do beyond the usual methods. If you just want a transparent background, you have two methods:
If you want to overlay partially transparent images, use the method 2 and add the images to it - but you'll lose the ability to put events on it. This is the method I use in Polaroid to get the surrounding white and dropshadow borders. eg.
<g:background id="gBackground" src="myBackground.png" style="..." />
...
gBackground.addImageObject("myImage.png", <xpos>, <ypos>);
If you need events assigned to the graphics, you can overlay partially transparent images with method 1, so long as the underlying image pixels are either 100% or 0% transparent where the image pixels above are partially transparent - otherwise you'll get pink pixels. This is the method I used in Media Player.
There is also a 3rd method just to confuse the matter further. It's a play on method 2, but gives you more control over adding/removing images and allows you to layer over other elements. Like method 1 though, you need to ensure the underlying pixels are either 100% or 0% transparent. v:image:
<g:background src="myBackground.png" style="..." />
<v:image src="myImage.png" style="..." />
NOTE: You'll need to add the VML tag to the HTML line: i.e. <HTML xmlns:v="urn
This is the method I use in Asteroids to overlay the semi-transparent border around the inside of the cabinet image.
Please be aware of all the bugs with these methods. If you get any strange behaviour, look on the known bugs list, where I've documented around a dozen bugs relating to backgrounds.
Tryin2Bgood
It happens when you have semitransparent elements overlayed. The only thing you can do, is ensure no semitransparent pixels overlap.
The alternative, is to use <g:background> and add the images to it. I've never tried this, so I'm not even sure it can handle multiple transparencies overlayed.
The other problem you may come across, is if you're relying on "background=..." - this doesn't always work. Make sure you use ' System.Gadget.background = "url(...)" ' to set the background.
nec4b
John Hax,
Are you getting pink text
Net
Kevin Rodgers
mtronix