set image source using css only

Question

I'd like to load images and their contents dynamically from a css file. I know I can set the background-image attribute for divs, but how can I achieve something similar for images?

Answer 1

You can't.

The <img> element holds content. The specifics of that content aren't something that can, or should, be described on the presentation layer.

Answer 2

You can set the src of the img to a transparent gif and set the background image of the img just like you would a div but that's a bit of a hack. You can change the src attribute of an image very easily using javascript:

html:

<img id="asdf" src="1.gif"  />

javascript:

document.getElementById("asdf").setAttribute("src","2.gif");