Override image src in css

There is a solution that I found out today (works in IE6+, FF, Opera):

<img src=”tiger.png” style=”width:0px; height:0px; padding: 50px; background: url(butterfly.png);”>

How it works:

– The image is shrunk until no longer visible by the width & height.
– Then, you need to ‘reset’ the image size; there I use padding (this
one gives a 16×16 image, of course you can use padding-left /
padding-top to make rectangular images)
– Finally, the new image is put there using background

It also works for submit-input-images, they stay clickable.

See: http://www.audenaerde.org/csstricks.html



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: