Tip: Use opacity to highlight buttons

Wednesday, May 07, 2008 at 8:52 AM



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.

No comments: