Now here’s the fun part.  The green button below is also labeled correctly.  It's a button because it links somewhere.  We know in advance before we click it that it’s a button because the mouse cursor changes when you pass over it.  And, finally, it's fancy because it has its own mouseover effect.  Go ahead...run your mouse cursor over it a few times.

See how the button changes from one background color to another?  When you add a mouseover effect to a button, not only does the mouse cursor change when it runs across the button, but the button itself changes as well.  When the cursor is on the button, you see the image with a red background; when it’s off the button, you see a different image, one with a green background.

Makes you want to click it, doesn’t it?  Aside from adding some nice aesthetics to your site, mouseover effects subtly increase your site visitors' confidence in the functionality of your website, and can help guide them when they navigate through it. 

You create this effect in SiteBuilder using the Mouseover Effect element:

"Image1" is the image that is on your website by default, and will be displayed when the mouse cursor is not over it.  "Image2" is the image that will be displayed whenever the mouse cursor is over "Image1". 

You need to provide your own button images to import into SiteBuilder; click "Browse" in each to locate the image on your computer that you want to use for each state.

The mouseover effect works for other image types too, but it’s really useful for buttons because it helps draw attention to the places on your site where you would like your customers to go.  If you want them to take a particular action, adding a mouseover effect is a great way to guide them there. 

Try out the mouseover effect, and let us know how you do!  If you want to leave a comment for this post, please return to the first page. Thanks, and have fun.

The mouseover effect element makes it easy to create that image swapping effect for buttons. Check out the illustration below: