navbar graphic <area> tags vs. breaking up the image individually

navbar graphic

[riospace]

I have a small navbar that has a small file size. I wanted to know if it is better to use <area> tags for the three different links in the graphic or should i break up the navbar image into three seperate images and then just link the images.

[limbo]

This sounds like a job for CSS. Typically a navigation bar consists of a list of links.

So the list would look something like:

<ul id="navigation">
<li><a href="index.html">home</li>
<li><a href="services.html">services</li>
<li><a href="about.html">about</li>
<li><a href="contact.html">contact</li>
</ul>

Then you use CSS to style and position the links - something like:

#navigation {padding:10px;background:#000;}
#navigation li {display:inline;padding:0 3px;}
#navigation a {color:#fff;}

You can then use a variety of methods to have the links include a rollover. The sliding doors technique combined with a CSS image preloader is my preferred choice. Search for either and you'll get a bunch of great tutorials.