Instead of having to do some annyoing JavaScript to create rollovers in your
menu, it is usually much faster to do some CSS. Also, you remove any images
from your HTML so that when CSS is not available (try turning it off on this
page and see for yourself) your menu is still easy to navigate. Search
engies will be able to quickly follow your menu and no JavaScript
(onMouseOver,
onMouseOut, onLoad) junk is needed within the HTML anywhere!!
Here is a "2 state" menu. The button looks one way when the mouse
is over it (a:hover, a:active), and another way when the mouse
is not over it (a:link, a:visited).
So what does the image look like for this menu?
The image contains both states of the button.That's why the CSS just
changes the background-position from top to bottom.
You could also do it this way, but there is
a slight flicker the first time the user puts his mouse over the link.
This menu has "3 states." I've added a new look when the link is
visited (a:visited). Click on one to see the visited state (go
on... I dare you!).
The image for these buttons look like this:
This menu is a bit more realistic. It has several different links all going to different parts of the webpage. All the images need to be different, but most of the styling is the same in the CSS.
You will notice each link has an ID assigned. That is so I can tell each link
which individual image to use. Then I use generic class selectors to change
the background-position.
The three images for this menu look like this:
/* Menu 1 CSS */ #menu1 a { display: block; height: 30px; width: 150px; background-image: url(images/buttonsTwoStates.gif); background-repeat:no-repeat; } #menu1 a:link, #menu1 a:visited {background-position:left top;} #menu1 a:hover, #menu1 a:active {background-position:left bottom;} /* Menu 2 CSS */ #menu2 a { display: block; height: 30px; width: 150px; background-image: url(images/buttonsThreeStates.gif); background-repeat:no-repeat; } #menu2 a:link {background-position:left top;} #menu2 a:visited {background-position:left bottom;} #menu2 a:hover, #menu2 a:active {background-position:left center;} /* Menu 3 CSS */ #menu3 a { display: block; height: 30px; width: 150px; background-repeat:no-repeat; } #btn1 {background-image:url(images/buttons1.gif)} #btn2 {background-image:url(images/buttons2.gif)} #btn3 {background-image:url(images/buttons3.gif)} #menu3 a:link {background-position:left top;} #menu3 a:visited {background-position:left bottom;} #menu3 a:hover, #menu2 a:active {background-position:left center;} /* Generic CSS for all menus */ .menu {margin: 0 0 1em;} .menu li {list-style: none inside; /* Gets rid of the bullets of the unordered list */ } .menu a {text-indent:-5000em; /* hides the text inside the links so that it does not cover up the image */ } .menu ul, .menu li { display: inline; /* fix IE6 and IE7 List bug. If this is left out, then the buttons will have a gap between them in IE 6 & 7 */ }