Mouse Over Magic

by Gary W. Priester

NetObjects Fusion can create some very excellent mouse roll-over buttons in the Style view window. And it's so easy it's almost a crime. With the wealth of professionally designed templates, non-artists can create a very handsome, and professional-looking, site with minimal effort. If you have a little experience with graphics software such as Adobe Illustrator, CorelDRAW, Photoshop, PaintShop Pro, XARA (my personal favorite), or other similar vector or pixel editing applications, you can create your own original buttons and banners. The auto-generated buttons have two states: Regular (the button as it appears when the page loads) and Over (the button as it appears when the mouse moves over the button). On the currently selected page, the button changes to Highlighted and has a corresponding Highlighted Over state.

I should point out, to avoid confusion, that you need to create the four images for the four button states (or use one of the pre-designed templates). NetObjects Fusion then does the hard work and writes a script that tells the browser how the buttons are supposed to behave.

Picture this



But there is another way to create mouse rollover effects in Fusion that I find more flexible than the auto-generated buttons. I'm talking about Picture Rollovers. Like the auto-generated buttons, Picture Rollovers have multiple states. The Initial state is the appearance of the picture as the page loads. The Mouse Over state is the appearance of the picture when the mouse passes over it. And the Mouse Out state is the appearance of the picture when the mouse moves off the picture.

Here is an actual Picture Rollover. Go ahead, move your cursor over it. You won't break it! See how it changes when the mouse (the cursor actually) passes over it, and it changes again when the mouse moves away. (The Initial state, once replaced by the Mouse Over and Mouse Out, does not return unless, or until, the page is reloaded).

I'm going to assume that readers have some familiarity with creating GIF and JPG images and I will only cover how the individual images work within the Picture Rollover feature. I will also assume, that you have created the three separate images needed for the Picture Rollover and have placed them in the Assets folder of your Fusion document.

NOTE: When creating images for Picture Rollovers, make all three images the same size. If the images are different sizes, Fusion will resize them to the Initial Image size and the results may not be to your liking!

[eFuse Home] [Start Here] [ Plan] [Design] [ Build] [Grow] [Find ] [New]

SITE MAP - Contact us - Legal Info
www.efuse.com ©2000, NetObjects

BuiltByNOF

bullet Try NetObjects Fusion for free
bullet
Buy  NetObjects Fusion

fuseman