I have been given a background (a png) that is partially transparent all the way across to use in a gadget. I can layer text on it and the text becomes partially transparent too. So white text becomes grey etc. However if I try and get this text or the box that contains it to respond to mouseover events - it just won't.

Well it will but only if I click on another arbitrary part of the background first (in the middle near the top - there are no hidden elements in there). Then all the text goes a weird pinkish white, and then it will respond. This seems to be another manifestation of the commonly recurring problems with focus. I want to check is there any reason that text layered on partially transparent background won't respond I mean the whole background is transparent, not just a section of it.

I'm happy to post the code, but I've lifted it from another working gadget I created, so I'm fairly certain it isn't the code, besides it's pretty simple to have an element with an onmouseover or onclick event that calls a function and to have that function with a single line of code that responds to it.

So in summation - in this gadget of a few lines with a partially transparent background, the onmouseover event on a div won't respond, unless focus is somehow gained first (note self.focus() doesn't help). In a similar gadget with an opaque background with transparent border, onmouseover div responds just fine. Is it just me going insane or is there something I should know about


Re: Sidebar Gadget Development Text, transparency, focus and backgrounds in gadgets

Jonathan Abbott

Events do not fire on elements that have partial transparency. Which explains the behaviour you're seeing.

If clicking on the Gadget get's it working, it sounds like you've got bug#32, which is caused when you use blur or softEdge.

Post the Gadget over on the Development & Programming forum on AeroXP and I'll take a look for you. You may well have come across a new bug.