HTML/CSS Mutiple menu image buttons rollover in CSS

I have this problem with my navigation bar. I have 5 .png buttons horizontaly aligned. I want to give them rollover in CSS, not JAVA.

I tried so many things but just can't seem to control it. Al the ways I tried, it wont even load the images... I don't know what to do :) I already placed them in 1 big div. Here's my code:

<div id="img">
    <a id="anchor1" href="index.php" ></a>
    <img src="images/nav/spacer.png" alt="" class="btn"/>

    <a href="portfolio.php">
        <img src="images/nav/portfolio_btn.png" name="portfolio" width="128" height="51" border="0" class="btn" id="portfolio" alt="" />
    </a>
    <img src="images/nav/spacer.png" alt="" class="btn"/>
    <a href="diensten.php"><img src="images/nav/diensten_btn.png" name="bestellen" width="125" height="51" border="0" class="btn" id开发者_如何学Go="diensten" alt="" /></a>
</div>

I suggest you look into CSS sprites. Here's an example tutorial for a menu: http://praveenfrancis.com/tutorials/create-a-simple-menu-with-css-sprite/

Try putting images inside of a <a></a> then in CSS declare something like this:

a hover{
background://what you want;
}