W3C home > Mailing lists > Public > www-style@w3.org > December 2005

Idea: background-image-frame attribute

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Thu, 29 Dec 2005 14:22:12 -0800
Message-ID: <007b01c60cd2$8b6056d0$3201a8c0@Terra>
To: <www-style@w3.org>

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

.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

     background-image: url(nextpage.png);
     background-image-frame: 0px 0px 10px 10px;
    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 

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.
Received on Thursday, 29 December 2005 23:49:51 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:22 UTC