Best practices for an images-only navbar with CSS - html

Question

I want to create a navbar with a ul element in which each item on the navbar is a textless, image-only link. So I set it up like so:
<ul>
<li></li>
</ul>
And then I realized I didn't really know how to get the images in there. I thought of two ideas, but they each have problems:
Put an img tag inside the anchor. This isn't good content/design separation, and also, if I want to make the image change when the user hovers over it (which I do), it gets a lot more complicated.
Use CSS background images, but now I have to give the anchor a width and height equal to the image's dimensions, forcing me to modify my code every time I change the images.
Image-only navbars are very common, so is there a standard way to do this?

Answer 1

I'm using it these way:
CSS
ul{
display:inline-block;
width:350px;
height:150px;
}
ul li{
display:block;
}
ul li a, ul li{
display:inline-block;
width:100%;
height:100%;
}
ul li.fb a{
background:url(http://placehold.it/350x150) no-repeat left center;
}
ul li.tw a{
background:url(http://placehold.it/350x150) no-repeat left center;
}
<ul>
<li class="fb"></li>
<li class="tw"></li>
</ul>
And you can put all these images in sprite, etc...
http://jsfiddle.net/sthAngels/842d4493/

Answer 2

Use both, use image with transparency and bacground-image, so you can change img on hover and transparent img will stretch <a> tag for you:
<a><img src="some-image.jpg" /></a>
and css something like this:
a img{
opacity:0;
}
a{
background-image:url(some-image.jpg);
}
a:hover{
background-image:url(some-other-image.jpg);
}

Answer 3

The most easy way to achieve this is to insert the on-hover-image (which will of course have the same dimensions as the normal image) in the anchor itself, and stack an element on top of it, which will have the 'normal-state' image as a background. Then on hover, hide the stacked element to show the on-hover-image. The anchor itself will now by itself have the images dimension, as will the stacked element.
html:
<ul>
<li><a href class="link1"><img src="link1-hover-image.png"><span></span></a></li>
<li><a href class="link2"><img src="link2-hover-image.png"><span></span></a></li>
<li><a href class="link3"><img src="link3-hover-image.png"><span></span></a></li>
</ul>
css:
a { position: relative; }
a img { vertical-align: bottom; } /* little hack for correct placement */
a span { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
a:hover span { opacity: 0; }
.link1 span { background-image: url(link-1-image.png); }
.link2 span { background-image: url(link-2-image.png); }
.link3 span { background-image: url(link-3-image.png); }
DEMO
But like everyone said; wherever possible just use plain css. Much faster, easier to maintain. So only use this if it's reaaally not possible to use css to style your buttons.