CSS is nowadays more popular for creating rollover menus and other rollover effects for images within the content of a web page. Let’s examine 3 popular methods:

1. Simple traditional rollovers

http://webstandards.psu.edu/accessibility/tech/rollovers#imageroll

2. Rollovers with only one image (an improvment over method 1)

http://www.creativepro.com/article/view-source-advanced-css-rollovers

2. Sprite images technique

http://www.alistapart.com/articles/sprites

3. Sliding Doors (for menus)

http://www.alistapart.com/articles/slidingdoors/

Notes:

Pure text navigation is much easier to maintain and loads more quickly than text-as-image navigation. Also, even though we can add alt attributes to each image, pure text is even more accessible since it can be resized by users with impaired vision.

Also check out this site: http://css.maxdesign.com.au/listamatic/index.htm

Know of any other techniques not covered here? Let me know in the comments section below!

Tutorial Sliding Doors

First we create the HTML code:

<div id=”navigation”>
<ul>
<li><a href=”">Home</a></li>
<li id=”current”><a href=”">Restaurant</a></li>
<li><a href=”">A’ la Carte</a></li>
<li><a href=”">Wine List</a></li>
<li><a href=”">Gallery</a></li>
<li><a href=”">Guests</a></li>
<li><a href=”">Functions</a></li>
<li><a href=”">Reservations</a></li>
<li><a href=”">Contact</a></li>
</ul>
</div>

Then we start building the CSS code:

Starting by the #navigation container div,

The width is set at 100% to take up the whole width of the page, while the height is set to 41px, which is the height of our background image (red gradient). We then include our background gradient which runs throughout the #navigation div. Note the use of repeat-x in order to have a repeating background.

#navigation {
width: 100%;
height: 41px;
background: url(../img/bg-nav.png) repeat-x;
}