Idea: background-image-frame attribute

Pretty wide spreaded situation when images are used to show different states 
of buttons/hyperlinks/etc.
like:

.next-page { background-image: url(nextpage.png); }
.next-page:disabled { background-image: url(nextpage_disabled.png); }
.prev-page { background-image: url(prevpage.png); }
.prev-page:disabled { background-image: url(prevpage_disabled.png); }

The idea is following:

It would be nice to have some way to say

.next-page-icon
{
     background-image: url(nextpage.png);
     background-image-frame: 0px 0px 10px 10px;
}
.next-page-icon:disabled
{
    background-image-frame: 10px 0px 20px10px;
}

where nextpage.png is an image with dimensions height:20px, width: 10px and
it contains two areas: one for normal state (0px 0px 10px 10px) and
another for disabled state 10px 0px 20px10px;

And background-image-frame attribute describes source rectangle area on
background-image to be used as actual source of final image bits for 
rendering.

It would give us following benefits:

1) one request to the server instead of many.
2) as this state images are dependent from each other then it is better to 
store them in one file.
3) it will simplify CSS in many cases:

page-icon { background-image-frame: 0px 0px 10px 10px; width: 10px; height: 
10px; }
page-icon:disabled { background-image-frame: 10px 0px 20px 10px;  }

and html will be

<a href="..." class="page-icon" style="background-image:url(prevpage.png)" 
/>
<a href="..." class="page-icon" style="background-image:url(nextpage.png)" 
/>

There are other possible approach for the same idea but
I would like to discuss it in general.
Any drawbacks/problems here?

Andrew Fedoniouk.
http://terrainformatica.com

Received on Thursday, 29 December 2005 23:49:51 UTC