Overview

this shows how to swap out an image using CSS only. theoretically, the w3c hints at it being possible using url(). but in actuality, it does not work on ANY browser.

you can do this with javascript, but it's more complicated. see Danny Goodman's JavaScript bible, 2nd edition. I tried to do this with CSS, but could not, since there is no way I can think of to change attributes of an element. this would be a really cool feature if css3 could do it. if it could and some browser implemented it, then there would be 3 ways: via

  • content:url();
  • content:attr();
  • content:image();

the cookies should change by hovering over them. they don't.

this is purely css, and some of this stuff I am using is simply css2.1 which never got implemented by ANY browser. I guess nobody ever thought a person would want to swap out an image using CSS. w3c did. they hinted at it in their standard.

you could just as well use js to modify the images if you wanted.

content:attr()

content:url()

content:uri()

content:image()

references