How to make buttons "auto-hilite" (like links on W

mluka · Post by **mluka** » Mon Sep 10, 2007 2:31 pm

Hi all.

I'd like to have some buttons change appearance automatically when the mouse passes over them; just like links behave on most Web pages. I'd probably want the name of the button to become underlined and to change color.

But I'm quite confused as to the best way to achieve this. I'm looking at the style of buttons, the hilite and autohilite properties, the armed property, etc.

I'm also wondering if I shouldn/t use mouseEnter and mouseLeave handlers...

Please, what's the simplest way???

Thanks!!

Klaus · Post by **Klaus** » Mon Sep 10, 2007 2:42 pm

Bonjour Michel,

"mouseenter" etc. is the way to go

Put this into your buttons:

Code: Select all

## Make it act like a LINK
on mouseenter
  set the textstyle of me to "underline"
  set the backcolor of me to 255,0,0
  ## or any color to change the color
  ## Button needs of course to be "opaque"!
end mouseenter

## Reset to "not LINK"
on mouseleave
  set the textstyle of me to "plain"
  set the backcolor of me to 0,255,0
  ## or whatever, you get the picture :-)
end mouseleave

## In case someone drags the pressed mouse away from the button!
on mouserelease
  mouseleave
end mouserelease

I think this will get you started.

Au revoir d'allemagne

Klaus

BvG · Post by **BvG** » Mon Sep 10, 2007 3:00 pm

If your button is not immediately recognisable as a clickable area to the user, then you have most likely made a rather bad UI. A user should not be forced move the mouse around the screen, to search for a clickable area. All in my opinion of course.

That said, I think mouseEnter and mouseLeave in the button should work fine for you. I have heard people complain about mouseEnter and mouseLeave not always firing, but I myself have never had that problem. For changing the text of the button to bold and/or underlined, check also up on the textstyle property in the documentation.

Maybe you think that mouseMove or mouseWithin can help, but I advise against those whenever possible. These two do tax the CPU quite a lot.

Also note, to change the icon of the button, you can simply specify a hoverIcon, without the need for further code.

Code: Select all

on mouseEnter
  set the textstyle of me to "bold, underline"
end mouseEnter

on mouseLeave
  set the textstyle of me to ""
end mouseLeave

mluka · Post by **mluka** » Tue Sep 11, 2007 2:15 am

Hi Klaus and BjÃ¶rnke. Thanks for your responses!

So mouseEnter and mouseLeave it's going to be. Thanks.

By the way, BjÃ¶rnke, I agree with your statement that buttons should be immediately recognisable as active areas. But a bit of visual confirmation can only help reassure the user. Just as you've done so nicely with the buttons on your homepage, actually.

Thanks for the help, guys! Merci from MontrÃ©al!