Gadgets with transparent background
transparent gadget
There again Microsoft afforded something. Who of you already tried to provide a gadget with transparent background but not to do it without CSS formatting, tear one’s hair.
It is simply impossible to put a transparent picture on the background and finish. As soon as I want to place a second semi-transparent image on top or simply write some text into the gadget, I’ll have a cute secondary effect: All will get a neat magenta coloured border (as you can see on the picture).
This results on a bug in the anti-aliasing engine of the sidebar, which causes problems with alpha-cannels. Microsoft use a magenta coloured mask for transparency in sidebar and this won’t be erased completely if using semi-transparency. Thus these develop nice edges with the anti-aliasing of images or text.
You can minimise this on images, by putting only e.g. GIF files on top of PNG background images (who don’t use semi-transparent images on top can use e.g. JPG either), because only PNG use alpha-cannels. But the problem with the text remains existing.
However, Microsoft provide us one alternative method, as we can use the Tag <g:background ... > or the JavaScript variant addImageObject() . For this, either take a look at MSDN g:background Element.
Example:
<html>
<head>
<title>Hello World</title>
<script type="text/jscript" language="jscript">
function init()
{
System.Gadget.background = "images\\background.png";
}
</script>
</head>
<body onload="init()">
<g:background id="imgBackground">
Hello World!
</g:background>
</body>
</html>The crucial disadvantage of this possibility is that thereby no events – like e.g. mouse click or mouse movement – are passed on, since images merged in such a way becomes part of the background.
Now my consideration goes by, whether I will really do myself this cramp and converts my gadget completely, or try to go around the restrictions with cheats so that all functions remain and I nevertheless get a transparent background. 
Da hat sich Microsoft ja mal wieder was geleistet. Wer von Euch schonmal versucht hat ein Gadget mit transparentem Hintergrund zu erstellen und dabei auf CSS Formatierung nicht verzichten möchte, der rauft sich die Haare.
Es ist schlicht unmöglich einfach nur eine transparente Grafik zu nehmen, diese auf den Hintergrund zu legen und fertig. Sobald ich eine weitere Grafik mit semi-transparenten Teilen darüber lege oder auch einfach nur Schrift ins Gadget einfüge, bekomme ich einen netten Nebeneffekt, über den sich unser großes T hier in Deuschland sicher freut: Alles bekommt einen netten Rand in Magenda (auf der nebenstehenden Grafik zu sehen).
Das liegt an einem Bug der Anti-Aliasing Engine der Sidebar, der Probleme mit den Alphakanälen hat. Microsoft verwendet für die Transparenz bei der Sidebar eine magentafarbene Maske, die bei Teiltransparenz nicht vollständig entfernt wird. Dadurch entstehen beim Anti-Aliasing von Grafiken oder Schriften diese netten Ränder.
Vermindern läßt sich das bei Grafiken, indem man über den aus einer transparenten PNG Grafik bestehenden Hintergrund nur z.B. GIF Dateien legt (wer auf transparente Grafiken verzichten kann, kann auch z.B. JPG nutzen), weil nur PNG Alphakanäle unterstützt. Aber das Problem bei den Schriften bleibt weiter bestehen.
Eine (proprietäre) Alternative liefert Microsoft uns aber gleich mit, indem wir den Tag <g:background ... > oder die JavaScript Variante addImageObject() nutzen. Siehe dazu auch MSDN g:background Element.
Beispiel:
<html>
<head>
<title>Hello World</title>
<script type="text/jscript" language="jscript">
function init()
{
System.Gadget.background = "images\\background.png";
}
</script>
</head>
<body onload="init()">
<g:background id="imgBackground">
Hello World!
</g:background>
</body>
</html>Der entscheidende Nachteil dieser Möglichkeit ist, daß dadurch keine Ereignisse – wie z.B. Mausklick oder -bewegung – weitergeleitet werden, da die so eingebundene Grafik Teil des Hintergrundes wird.
Nun geht meine Überlegung dahin, ob ich mir wirklich diesen Krampf antun werde und mein Gadget komplett umbaue, mit Tricks versuche die Einschränkungen zu umgehen, damit alle Funktionen erhalten bleiben und ich trotzdem einen transparenten Hintergrund bekomme.
Version 2.1.0 of this gadget is
Last Comments