Tip: Use opacity to highlight buttons

Wednesday, May 07, 2008 at 8:52 AM

By Stefan Van Damme, Gadget Developer

Using opacity, you can make buttons that light up when you mouse over them. This effect can improve the usability and appearance of a gadget that has several buttons close together.



Implementing this opacity effect for a button takes just two easy steps:

Step 1: Paste the following code into main.xml within the <view> element.

<button height="30" name="button" image="image.png"
  opacity="200"
  onmouseout="makeTransparent()"
  onmouseover="makeOpaque()"/>

Step 2: Now paste the following code into main.js.

function makeTransparent() {
  button.opacity = 200; //transparent (0 would be invisible)
}

function makeOpaque() {
  button.opacity = 255; //completely opaque
}

I used this technique in my Expression Tools, Windows Dock, and Fast Shutdown gadgets.

Have a tip you'd like to share? Send it to gd-developer AT google DOT com. To see all tips, choose the Tips label.