CSS rollovers are quite easy to implement as they use only CSS and your HTML knowledge. Where images are concerned, it’s best to keep in mind that you should only use them for the top-level navigation part of your menus. Use text in CSS for the menu items with CSS powering the rollover effect and you will notice a much faster loading page. So use this tutorial only for the top-level menu bar to compliment a side menu; I can also cover CSS drop-downs in another tutorial.
Let’s look at a CSS rollover. You can edit it as needed in your web editor. The image for the example can be downloaded here. Note the design, the button is drawn twice. This is due to the CSS code and how it will manage the rollover. The CSS below displaces the image position in order to show the second half of the image as the rollover image. This way, you only need one image for the effect. Ensure that the size of one of the buttons (half the image width) matches the values in the a.mouseover CSS code below.
The CSS rollover style button above uses overlay text for the image being used. The <span> tag allows the text to be displayed if CSS is not supported.
Always find a CSS solution and your code will be sharper, cleaner and result in faster loading pages.