Header/Link Text Image Replacement

So

How do you:

# Replace a header tag with an image and leave the text in place for accessibility (maybe the stylesheet will be switched off) or for visitors with images off?
# Do the same with a hyperlink, or have the header as a hyperlink?

Bearing in mind that it is an idea to keep these type of images in the css (background) as they don't usually add much by way of meaning to the content.

Now, what I will post here IS NOT NEW. It just hasn't been posted up here in this 'How To' forum.

The code is remarkably simple, and it shows the two techniques, one for text replacement, one for hyperlink replacement. I have put the css in the head for simplicity:

Header Replacement

html,body,h2{
margin:0px;
padding:0px;
border:0px;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
h2 {
height:44px;
width:300px;
position:relative;
font-size:.8em;
margin:50px;
}
/* hide from Mac IE5.x \*/
h2{overflow:hidden;}
/* end hide*/
h2 span, h2 em {
background: url(header-h2.jpg);
position:absolute;
left:0;top:0;
display:block;
height:44px;
width:300px;
}

This is the header text

This is the header link

Enjoy! You'll need the attached image or make one of your own.