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.
You could set that image as a
You could set that image as a background.
Position links or something over it, then on hover show the new background image or move it's position.