Oh Boy! css .hover over sprite buttons which are positioned non-linearly AND which have a background image.

The icons in the picture below are found here. The Game Plan

I have a two-state sprite for that image. I would like do a state-change-on-hover for those icons. The problem is the icons are not positioned in a single neat row AND, there are big static parts one would not like to download twice.

You will tell me to split the image up and do a table inside a single cell table (Single cell for the static picture). I hear you, but html is so table-unfriendly, I cannot begin to imagine how one would style the cells relative to one another in order to get each part of the picture properly positioned.

Is there a way to do it with absolute positions and display:block ? And if so, how would one handle the static parts of the picture while doing a hover on the custom classes of each icon ?

's quite a mouthful.
Em