Roll over images

I have a PHP code that puts out my navigation tabs on the top of my page in such a way that if the page is active it prints:

If the page is inactive this is printed:

the CSS for the two classes is:
li.active_tab {
background-color: #ffcc33;
background-image: url(pics/active.GIF);
color: #000000;
margin-bottom: 0px;
white-space: nowrap;
padding: 0px 12px 0px 12px;
border-bottom: 1px solid #ffcc33;
}
li.inactive_tab {
background-color: #ffcc33;
background-image: url(pics/inactive.GIF);
color: #000000;
margin-bottom: 0px;
white-space: nowrap;
padding: 0px 12px 0px 12px;
border-bottom: 1px solid #ffcc33;
}

So here's my problem: I want to roll the image rollover.GIF on mouse over. How would I do this witht he current CSS/PHP/XHTML format?