Draw image on mouse rollover?

[travisbell]

Hey guys,

What is the easiest way to draw a new image when you mouse over a menu item?

I am looking at adding some icons to the main menu but I can't seem to get the code quite right.

Thanks,

[MeInMaui]

Originally Posted by travisbell

Hey guys,

What is the easiest way to draw a new image when you mouse over a menu item?

I am looking at adding some icons to the main menu but I can't seem to get the code quite right.

Thanks,

I think the simplest way is to set a boolean variable like EnableRolloverImage to true in a FocusGained() hook and false in a FocusLost() hook (make sure to call RefreshArea(menu panel) after the change). Then use a conditional in the UI chain to choose the appropriate graphic. I've been playing a lot with mouseover effects lately. HTH

Aloha,
Mike

[dflachbart]

And in addition to what Mike said, you can also just use

- If Focused
  +- true
      +- Image1
  +- false
      +- Image2

And as another alternative, you can use a button theme and specify different images for "Background Image" and "Background Selected Image"


Dirk

[nielm]

Or even easier if you want to display the image 'outside' of the menu item, with no need for manual focus detection or refreshing:... in each main menu Item widget have an attribute 'IconPath' with the path to the image, and use GetFocusContext() elsewhere to retrieve the icon path of the currently selected Menu item, and display the image. Refreshing is done automagically when focus changes

(my dynamic menus do something similar to this, as do any of the recordings/schedule menus)

GetFocusContext()
+-LoadImage(IconPath)
   +-IMAGE

[GKusnick]

It depends on what you're trying to do. If you want an image to appear in an item when it has focus, use Dirk's solution. If you want an image to appear in a fixed place on the screen, but the image changes depending on which item has focus, use Neil's solution.

Note that all these suggestions assume that you have "Focus follows mouse movement" enabled in the Customize section of Detailed Setup. It's enabled by default (if I recall correctly) but be aware that these solutions don't detect mouseover per se, but rather the change of focus that (normally) follows the mouse.

[MeInMaui]

Originally Posted by GKusnick

It depends on what you're trying to do. If you want an image to appear in an item when it has focus, use Dirk's solution. If you want an image to appear in a fixed place on the screen, but the image changes depending on which item has focus, use Neil's solution.

Note that all these suggestions assume that you have "Focus follows mouse movement" enabled in the Customize section of Detailed Setup. It's enabled by default (if I recall correctly) but be aware that these solutions don't detect mouseover per se, but rather the change of focus that (normally) follows the mouse.

One thing I've noticed with the 'If Focused' approach that Dirk mentioned is that it seems to allow for a noticable delay after focus is gained until the change takes effect. That is why I recommended the hooks. The response seems to be instantaneous with this approach. But it is very cool that there are so many approaches available.

Aloha,
Mike

[GKusnick]

I can't say I've ever noticed any such delay. Redraw on focus changes seems pretty much instantaneous to me, without the need for explicit Refresh() calls. But that's just my subjective impression.

If you do call Refresh() or RefreshArea() from FocusGained or FocusLost hooks, be sure to Fork() first, as per Note 2 on p.7 of the V6 Studio manual.

[travisbell]

Originally Posted by nielm

Or even easier if you want to display the image 'outside' of the menu item, with no need for manual focus detection or refreshing:... in each main menu Item widget have an attribute 'IconPath' with the path to the image, and use GetFocusContext() elsewhere to retrieve the icon path of the currently selected Menu item, and display the image. Refreshing is done automagically when focus changes

(my dynamic menus do something similar to this, as do any of the recordings/schedule menus)

GetFocusContext()
+-LoadImage(IconPath)
   +-IMAGE

Interesting...

I added an attribute to one of my menu items,

Attribute: IconPath
Value: images\menu_1_back.png

But am getting a 'Syntax Error' on the "Value" field...

The rest of it looks like so:

GetFocusContext()
+-LoadImage(IconPath)
   +-IMAGE

I am not sure what I am doing wrong here...

[nielm]

Originally Posted by travisbell

Interesting...

I added an attribute to one of my menu items,

Attribute: IconPath
Value: images\menu_1_back.png

But am getting a 'Syntax Error' on the "Value" field...

Quote it...
and in Strings "\", have to be doubled (as they 'escape' other chars, so value should be:
"images\\menu_1_back.png"

[travisbell]

Yup. That method works perfectly.

Thanks guys!