Mouse over on several links with only 2 images.

Let me show you how to make a navigation with mouse over effect with only two images and a little css.

Look at this example

Here are the two images. The size are 120 x 20 px

Righclick on this images and choose save image as...	Normal state Over state	Copy and paste this css into the source in the css editor. a { color: white; font-weight: bold; font-size: 12px; font-family: Verdana; text-decoration: none; background-image: url(normal.jpg); text-align: center; padding-top: 2px; border-style: solid; border-width: 1px; border-color: white #000 #000 white; width: 120px; height: 20px } a:hover { color: black; font-weight: bold; font-size: 12px; font-family: Verdana; text-decoration: none; background-image: url(over.jpg); text-align: center; padding-top: 2px; border-style: solid; border-width: 1px; border-color: white #000 #000 white; width: 120px; height: 20px }

In the CSS Definitions in the CSS editor you see how simple it is to make effective navigations in GoLive. A tip when you make your own: Make the "A" tag as complete as possible rightclick on it and choose duplicate and name it A:hover and apply the over state.

I hope you like this tip. If you have any questions and/or suggestions post a note in my forum.

//Håkan Petersson