Graphical navigation bar

[C19H28O2]

Guys,

I have a navigation bar that was built in photoshop, but i'm a bit stuck on how to get the add the links behind the graphics

This is the image...

http://aycu10.webshots.com/image/22289/2001740120718270559_rs.jpg

Thanks

[PeejAvery]

I must say that it is hard to read the menu items. Well, you can break it up into individual images, or you can build an HTML map (http://www.w3schools.com/tags/tag_map.asp) with it.

[C19H28O2]

Thanks for the reply.

I did figure I would need him to slice the image.

Once it has been cut apart, do i stick the parts in divs? is that what you would recommend?

[PeejAvery]

Stick it in an anchor.

<a href="link.html"><img src="image.jpg"></a>

[C19H28O2]

Sorry, I meant once linked menu's have been cut out and placed in their own image file, would you use divs to reconstruct the image on the site?

[PeejAvery]

1. You can use an HTML map as stated in my first post. This would save you time.

2. You can use tables.

3. If you want to work with CSS, you can use <div> tags.

[andreasblixt]

If you want to do it semantically, this is what your HTML could look like:
<ul id="menu">
<li id="home"><a href="index.html"><span>Home</span></a></li>
<li id="artist"><a href="artist.html"><span>Artist</span></a></li>
<li id="audio"><a href="audio.html"><span>Audio</span></a></li>
<li id="videos"><a href="videos.html"><span>Videos</span></a></li>
<li id="photos"><a href="photos.html"><span>Photos</span></a></li>
<li id="info"><a href="info.html"><span>Info</span></a></li>
</ul>

Then you would have complete freedom to restyle your navigation without having to care about the HTML on every page, you'd just change the CSS. The CSS for your current bar could be something along the lines of:
ul#menu {
background: url(menu.jpg) no-repeat;
height: 25px;
list-style: none;
margin: 0;
padding: 75px 137px 50px 135px;
}

ul#menu li {
float: left;
margin: 0;
padding: 0;
}

ul#menu li, ul#menu a {
display: block;
height: 25px;
width: 88px;
}

ul#menu span {
display: none;
}

Besides separating structure and design, the above solution also keeps the menu in one image (an image map would also keep it as one image) which speeds up page loading time (less threads and less requests) and reduces the bandwidth usage. It has also been tested to work identically in Microsoft Internet Explorer 5.01+, Mozilla Firefox and Apple Safari.

Edit
I'd missed changing the dimensions of the ul element after I changed the padding - that's fixed now.

For a reference on HTML and CSS, I recommend http://www.w3schools.com/ .