Javascript image swap is the way I traditionally dealt with swapping images in a navigation menu. This was time consuming to set up and bandwidth intensive.
I was amazed how easy it was to impliment css sprites. You load one image and then only display parts of that image depending on what you need. Regardless of efficiencies in development time and bandwidth, you have to try it just because it is such a cool concept.
- Image
- HTML
- CSS
1. Image
First, we need an image. This demonstration will use a basic photography website as an example.
The first row is the menu in an off position, the second row, the pink one, is what is used when a link is selected or hovered over.
2. HTML5 Navigation
Next, we need a menu.
3. CSS
Finally, the CSS.
We style the nav, putting the image as background, but only displaying the top half.
nav ul { width: 640px; height: 30px; background: url(menu.png); margin: 10px auto; padding: 0; position: relative;}
nav ul li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
nav ul li, nav ul a { height: 60px; display: block;}
Now the fun bit.
Cut the image up into sections for the links to use. The home link will extend from 0 for 92px. The portriats link extends from 283px for 100px.
#home { left: 0; width: 92px; }
#weddings { left: 93px; width: 100px; }
#family { left: 194px; width: 88px; }
#portraits { left: 283px; width: 100px; }
#just_for_fun { left: 383px; width: 132px; }
#contact_me { left: 516px; width: 134px; }
Now the a:hover.
When we hover over a section we just defined, we move the perspective to the pink menu section. With an original height of 60px, 32px worked out with my image to provide flicker free movement.
#home a:hover { background: transparent url(menu.png) 0 -32px no-repeat; }
#weddings a:hover { background: transparent url(menu.png) -93px -32px no-repeat; }
#family a:hover { background: transparent url(menu.png) -194px -32px no-repeat; }
#portraits a:hover { background: transparent url(menu.png) -283px -32px no-repeat; }
#just_for_fun a:hover { background: transparent url(menu.png) -383px -32px no-repeat; }
#contact_me a:hover { background: transparent url(menu.png) -516px -32px no-repeat; }
There you have it, simple and easy for smooth cross browser functionality. I have tested in IE6, IE7, IE8, FireFox, Safari and Chrome.
Follow me on