0

Transparent Images and themes

So I'm trying to use a png image with a transparent background inside a button. The thing is while the image is transparent (except for the white triangle) it looks like the theme adds some treatment to the image so that it gets an additional gradient. I thought using KONtx.element.Image would remove this but that doesn't work. Is there someway to remove those gradients so that the transparency isn't affected?

Sample below:


Code:
CODE
		this.controls.daySliderContainer = new KONtx.control.Button({
styles: {
width: this.width,
height: KONtx.utility.scale(25),
}
}).appendTo(this);

this.controls.pageLeft = new KONtx.element.Image({
src: $cbs.styles.images.chevron_left,
styles: {
height: KONtx.utility.scale(25),
width: KONtx.utility.scale(44),
vOffset: 0,
hOffset: 0,
backgroundColor: 'transparent',
},
}).appendTo(this.controls.daySliderContainer);


this.controls.dayHeaderText = new KONtx.element.Text({
label: '',
styles: {
height: KONtx.utility.scale(25),
width: this.width - KONtx.utility.scale(88),
hOffset: KONtx.utility.scale(44),
textAlign: 'center',
},
}).appendTo(this.controls.daySliderContainer);

this.controls.pageRight = new KONtx.element.Image({
src: $cbs.styles.images.chevron_right,
styles: {
height: KONtx.utility.scale(25),
width: KONtx.utility.scale(44),
hOffset: this.width - KONtx.utility.scale(44),
},
}).appendTo(this.controls.daySliderContainer);


The thing is I want to be able to toggle the images off and on which is why I'm doing it this way, I could probably do this with a background image as well?

Thanks!

by
3 Replies

Recent Posts

in General - Yahoo! TV Widgets