This is achievable by image mapping coordinates in HTML. Though this isn’t best practise for developing. I would advise veering away from using images in your nav (unless it’s like a logo, for example). However, the best image solution would be to use a technique called “sprites” where you divide your image based on pixels.
What kind of image is it? Is it just text or a background image with text on it? Maybe post the image so we can see roughly what you mean by applying an image to your nav bar as there are different ways to achieve this.
Here’s a tutorial for CSS sprites: http://stylemeltdown.com/image-sprite-navigation-with-css/
Again, depending on what you’re try to achieve, images could be completely avoided and you might want to use CSS only (there are literally thousands of tutorials out there. Search for CSS3 Horizontal Navigation Tutorial — you will be surprised.)
As for linking, I would strongly advise using a solution for your nav like so,
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="example.html">About</a></li>
<li><a href="example2.html">Work</a></li>
<li><a href="example3.html">Contact</a></li>
</ul>
