adding text to images for navigation bar - html

Question

I have a navigation bar but want to add images to it, so that rather than text links, the nav bar is made up of buttons consisting of an image and text which have a hover effect etc.
But as some of the link names are dynamic I can't make the buttons in photoshop so was wondering how to make this type of nav bar in just html and css.
Any ideas?
EDIT
To clarify i have the following image sample nav button
and want to add text beneath this to form the buttons on the nav bar if that makes it clearer.

Answer 1

You can do a lot just with CSS
The basic idea is to change attributes of each state of the button using pseudo classes .cssclass:hover to mouse over state and .cssclass:active to mouse down.
normal
/* style of the button in normal state */
button.css3button{
padding: 0.5em;
background-color: lightblue;
border: 4px outset green;
color: green;
border-radius: 4px;
}
:hover
/* properties that change when mouse over */
button.css3button:hover {
background-color: lightgreen;
}
:active
/* properties that change when mouse down */
button.css3button:active {
color: yellow;
border: 4px inset red;
}
Live Demo: JSFIDDLE
more complex styling examples with CSS3:
<button type="button" name="" value="" class="css3button">submit</button>
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#bfc2ff 0%,
#82b4ff 25%,
#4664fa);
background: -webkit-gradient(
linear, left top, left bottom,
from(#bfc2ff),
color-stop(0.25, #82b4ff),
to(#4664fa));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
Demo: JSFIDDLE
you can of course change sizes, colors, gradients for each state :hover :active :visited on your own taste, you can style almost anything <a> <span> <div> <button>

Answer 2

This question isn't really suited for this forum. It is for specific problems, not basic tutorials. There are plenty of good tutorials out there you can find by doing a simple google search that walk you through basic CSS and how to achieve this.
But just to get you started, you could do something like this: http://jsfiddle.net/wgBTZ/
HTML:
<ul>
<li><a href="#" >One</a></li>
<li><a href="#" >Two</a></li>
<li><a href="#" >Three</a></li>
<li><a href="#" >Four</a></li>
</ul>
CSS:
li {
float:left;
width: 100px;
height: 40px;
background:#CCC;
margin:0 0 0 15px;
}
a {
color: black;
text-decoration:none;
float:left;
width: 100px;
height: 40px;
background:#CCC;
}
a:hover {
background:#000;
color:white
}
Edit: This is just the basic mechanics. With CSS3 you can take what I've done above and actually build some pretty cool stuff.