converting my navigation bar to css sprites

at the moment the navigation bar of my website is consisted of 'img' tags wrapped in 'a' tags. Each img has a javascript function to show a rollover img. So all in all the browser has to l开发者_C百科oad 18 images which is 18 http requests which is obviously very inefficient.

I want to use 1 sprited image with css background image and the :hover pseudoclass.

The problem is that if I use just 'a' with a background image I cannot set the height and width. And if I set it the 'a' to display:block than it ruins the flow of the page. Is there any way to use css{background-image} while keeping everything inline?

if not what should I do?

here is the site: www.thetempers.net

---

Generally, if you want to set the width/height, as you expected, you'll need to set the display to block.

Though, usually, that will place one right after the other vertically, probably not what you want.

So try applying float:left to them as well, and then play with the margins to get the spacing right.

On a side-note, the performance advantage you might get for sprites might not be very noticeable unless you have extreme load. A lot of times, it's not worth the headache.

---

You may also use display: inline-block; insted of display: block; float: left; but it won't work in older browsers e.g. IE < 8.0. You can check here for browser support.

Sprites minimize the number of requests to the server. This way server uses less CPU cycles and transmitted data is a little bit smaller. The biggest advantage for the user though is that they get your site faster. The way it works is that most browser by default do only few requests to the same server at one time. So browser requests for first few files, and ask for next file only when one of those finish downloading. 18 files is quite a lot.

---

You can apply display: inline-block which will make your a behave like img.

Additionally, for your specific case it looks like you don't need extra images for the hover state. You could apply opacity...

#nav-bar a {
  display: inline-block;
  background: [...];
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
  filter: alpha(opacity=80);
  opacity: 0.8;
}

#nav-bar a:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

You can compromise with 9 requests, or reduce the filesize if you are using sprites with this technique.