Question

I have a button that can have a focus css class associated with it and I instantiate this at runtime within Javascript.
This is all provided by a bespoke Javascript framework so can not be changed.

Normally I would provided 2 additional CSS class for this button,
e.g.

btn { background-image: url(/btn.png);}
btn.focus { background-image: url(/btn-focus.png);}

This will give me 2 different images based on whether the button is ‘focused’ or not.

The problem I have now is that the image urls are dynamically loaded at runtime, and there is no way of specifying them with a static CSS file.

I’m thinking one possible solution is to ‘somehow’ generate a new style element with the btn and btn.focus classes in it (with the dynamic URLs) and either append it to the head or embedded it in the markup prior to instantation of the Button itself. This solutions doesn’t seem ideal.
Can anyone suggest anything else?

Thanks in advance.

Answer 1

If your case is specifically about images that represent different states of a single object (e.g. focused or non-focused state of a button) then it’s a good idea to use sprites.
That is creating a single image with all button states and loading it (dynamically if you want).
Then you can write a universal rule in your CSS:

btn {background-position: 0 0;}
btn.focus {background-position: 0 -20px;} /* 20px is the height of your button*/