Dave Penny

hey guys, wondering about that age old issue of transparent images again Smile

I'm ussing both css and html to render my gadget. Even after setting the gbackground to display the background image, I have two transparent pngs one on top of the other to render button control of a mediaplayer gadget. I'm going to post the code from both the html and css and if you guys can help., I'ld appreciate it . I can also send you the complete gadget if that would help, by email... ministry_cgy@hotmail.com...

Gadget.html:

Code Snippet
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">






id="Player"
width="1"
height="1"
style="position:absolute; left:0;top:0;"
CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject"
>
<PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
<PARAM NAME="AutoStart" VALUE="false">
<PARAM name="uiMode" value="invisible">
<PARAM name="PlayCount" value="1">
<PARAM name="showcontrols" value="true">
</OBJECT>
<div id="tracktime">
<script language="jscript">
var timer = window.setInterval("trackpostext.value = Player.controls.currentPositionString",1000);
</script>
<input type="text" id="tracktextfield" name="trackpostext" />
</div>
<div id="artisttext"></div>
<div id="tracktext"></div>
<div id="playcontrol">
<input type="image" onfocus="this.hideFocus=true;" onclick="Player.controls.play();RemoveContent('playcontrol');" name="play" height="27" width="27"
src="../images/play.png" /></div>
<div id="pausecontrol">
<input type="image" onfocus="this.hideFocus=true;" onclick="Player.controls.pause();InsertContent('playcontrol');" height= "27" width="27"src="../images/playing.png" name="playing" /></div>
<div id="prevcontrol">
<input type="image" onfocus="this.hideFocus=true;" onclick="Player.controls.previous();" name="rw" src="../images/rw.png" /></div>
<div id="nextcontrol">
<input type="image" onfocus="this.hideFocus=true;" onclick="Player.controls.next();" name="ff" src="../images/ff.png" /></div>
</body>
</html>


hg.css:

Code Snippet
body{
width:130px;
height:130px;
margin:0;

cursor:default;
}
img { border:none; }
#tracktime {
position:absolute;
left:41px;
top:15px;
width:50px;
height:10px;
font-family:Arial;
font-size:6pt;
color:#FFFFFF;
text-align:center;
}
#artisttext {
position:absolute;
left:25px;
top:31px;
width:80px;
height:10px;
font-family:Arial;
font-size:6pt;
color:#FFFFFF;
text-align:center;
}
#tracktext {
position:absolute;
left:16px;
top:43px;
width:95px;
height:10px;
font-family:Arial;
font-size:6pt;
color:#FFFFFF;
text-align:center;
}
#tracktextfield {
width:27px;
height:10px;
font-family:Arial;
font-size:8pt;
color:#FFFFFF;
text-align:center;
background: 000000;
border-color: 000000;
border:none;

}
#playcontrol {
z-index:4;
position:absolute;
left:54px;
top:62px;
width:28px;
height:49px;
}
#pausecontrol {
z-index:3;
position:absolute;
left:54px;
top:62px;
width:28px;
height:54px;
}
#nextcontrol {
z-index:2;
position:absolute;
left:83px;
top:63px;
width:30px;
height:31px;
}
#prevcontrol {
z-index:1;
position:absolute;
left:31px;
top:63px;
width:20px;
height:34px;
}

any help here would be greatly appreciated



Re: Sidebar Gadget Development Transparent images with pink border issue again

Andy E

Sorry, I don't see your g:background code anywhere in that post. Nevertheless, here's a few tips.

If a transparent or partially transparent image is placed on top of a gbackground that has even the tiniest partial transparency, you'll get the pink effect. Transparent areas of images must be placed on top of a fully opaque area.
The only way around the above is to use addImageObject() on your g:background. This allows you to layer transparent images on top of each other. The problem with this is that you lose any event functionality (onmouseover, onclick etc).


Andy




Re: Sidebar Gadget Development Transparent images with pink border issue again

Dave Penny

sorry must have cut out.... here's the code again from gadget.html

Code Snippet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MediaDock 1.0</title>
<link href="library/css/hg.css" rel="stylesheet" type="text/css" />
<script src="library/js/gadget.js" type="text/Javascript" />

<SCRIPT FOR = "Player" EVENT = "mediaChange(Item)">
if (Player.currentMedia){
tracktext.innerHTML = truncateString(Player.currentMedia.name);
artisttext.innerHTML = truncateString(Player.currentMedia.getItemInfo("AlbumArtist"));
}
</SCRIPT>
<SCRIPT LANGUAGE = "JScript" FOR = Player EVENT = playStateChange(NewState)>
switch (NewState){
case 1:
tracktext.innerText = "Stopped";
InsertContent('playcontrol');
break;
case 2:
tracktext.innerText = "Paused";
break;
default:
tracktext.innerHTML = truncateString(Player.currentMedia.name);
artisttext.innerHTML = truncateString(Player.currentMedia.getItemInfo("AlbumArtist"));
}
</SCRIPT>
</head>
<body onload="onLoad()">
<g:background src="bg.png" style="position:absolute;top:0;left:0;z-index:0" />
<OBJECT
id="Player"
width="1"
height="1"
style="position:absolute; left:0;top:0;"
CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject"
>
<PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
<PARAM NAME="AutoStart" VALUE="false">
<PARAM name="uiMode" value="invisible">
<PARAM name="PlayCount" value="1">
<PARAM name="showcontrols" value="true">
</OBJECT>
<div id="tracktime">
<script language="jscript">
var timer = window.setInterval("trackpostext.value = Player.controls.currentPositionString",1000);
</script>
<input type="text" id="tracktextfield" name="trackpostext" />
</div>
<div id="artisttext"></div>
<div id="tracktext"></div>
<div id="playcontrol">
<input type="image" onfocus="this.hideFocus=true;" onclick="Player.controls.play();RemoveContent('playcontrol');" name="play" height="27" width="27"
src="../images/play.png" /></div>
<div id="pausecontrol">
<input type="image" onfocus="this.hideFocus=true;" onclick="Player.controls.pause();InsertContent('playcontrol');" height= "27" width="27"src="../images/playing.png" name="playing" /></div>
<div id="prevcontrol">
<input type="image" onfocus="this.hideFocus=true;" onclick="Player.controls.previous();" name="rw" src="../images/rw.png" /></div>
<div id="nextcontrol">
<input type="image" onfocus="this.hideFocus=true;" onclick="Player.controls.next();" name="ff" src="../images/ff.png" /></div>
</body>
</html>





Re: Sidebar Gadget Development Transparent images with pink border issue again

john-wayne-interessierts

I had the same issue with one gadget, here is my solution:

Code Snippet

<body onload="LoadGadget()" onunload="CloseGatget()">
<g:background id="bodyBackground" src="images/blank.png" />
<div id="GadgetContent" onclick="GadgetClicked()" ondragenter="event.returnValue = false" ondragover="event.returnValue = false" ondrop="FileDragDropped()">
<img id="imgContent" src="images/logo.png" alt="" />
<img id="StatusImage1" onclick="OpenLogIn()" src="images/ledoff.png" alt="" title="Not registered!" />
</div>
</body>

The StatusImage1.src changed if the user loged in or not on a website (XHR request inside LoadGadget())

The logo.png file is 60*60, no problems, the ledoff.png is a 16*16 picture=>surprised pink border.

To fix this I use the following CSS:

#GadgetContent
{
width: 100%;
height: 100%;
border: 0;
padding:0px;
margin:0px;
background-color:Transparent;
}

#StatusImage1
{
position:absolute;
width:16px;
height:16px;
right:0px;
bottom:0px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}

with the filter for the small image I get no pink border. I guess this trick works for all images. Sure, maybe not the best sollution, but it works here. Try it.

Peter





Re: Sidebar Gadget Development Transparent images with pink border issue again

Dave Penny

Well, I got it all figured out, I ended up just adding a full opaque section on the trnasparent image in the size and shape of the buttons that replace dynamically. now no issues! It works perfectly and seeing as that is the only section that has the other transparent images on it, it sorted itself out!

<edit> Andy's answer would solve it, although someone else helped me reach the same conclusion





Re: Sidebar Gadget Development Transparent images with pink border issue again

Andy E

Andy wrote:
If a transparent or partially transparent image is placed on top of a gbackground that has even the tiniest partial transparency, you'll get the pink effect. Transparent areas of images must be placed on top of a fully opaque area.
The only way around the above is to use addImageObject() on your g:background. This allows you to layer transparent images on top of each other. The problem with this is that you lose any event functionality (onmouseover, onclick etc).


AHEM!

Andy






Re: Sidebar Gadget Development Transparent images with pink border issue again

Dave Penny

Andy E wrote:

Andy wrote:
If a transparent or partially transparent image is placed on top of a gbackground that has even the tiniest partial transparency, you'll get the pink effect. Transparent areas of images must be placed on top of a fully opaque area.
The only way around the above is to use addImageObject() on your g:background. This allows you to layer transparent images on top of each other. The problem with this is that you lose any event functionality (onmouseover, onclick etc).


AHEM!

Andy

I edited the post above to show youre help, even though It was someone from AEROXP that helped me sort it out before you posted, to be honest I didn't read that post you made





Re: Sidebar Gadget Development Transparent images with pink border issue again

Andy E

haha thanks Smile