Change 'src' value by css for input tag with type="image"

Question

Is it possible to change the value of src attribute of <input type='image' alt="Text will be shown if pics are disabled" src='somepic.png'../> by css?

The problem is: I want to specify which pic will be shown as submit button just using css (so the design team will change only css files!). If I use the alternative way like <input type="submit" class="cssclass" value=" " alt="Text will be shown if pics are disabled"/> and specify the background of this element in css - it doesn't work well if pics are disabled. - No any alternative text is shown instead of pic. However the first way solves this situation...

Please advice something

Thanks.

Answer 1

Here it is: http://jsfiddle.net/kizu/66JXn/

Some notes about this solution:

1. Use <button></button>, 'cause it can include other blocks.

2. You'll need a bit of extra code to make all these work in Fx and IE:

   • For Fx you need an extra wrapper inside (there are positioning bug) and some extra -moz- properties reset.
   • For IE you must shrink the original button, 'cause there are some extra padding that is hard to remove.

3. You place the text and another element inside, that would overlay the text. So when the images would absent, the text would be accessible.

That's it :)