Let's say I have an <h1> I want to use image replacement on, so assume I have some cutesy graphic that fits the design better than some basic styled text.
But I also want to adhere to the convention of having my logo be a clickable link back to the index.htm page (or what have you).
Is there a way to use both an image replacement technique and have a clickable link? Or do i need to resort to an image, inside a link, inside the h1?
Is there a semantically sound practice here?
For the sake of giving the question a context, I was viewing HTMLDog.com when this crossed my mind. I noticed Patrick is using an image inside a <p id="logo"> element. View any page but the home page and you'll see the <a> tag as well.
Oh...and while I'd prefer not to use sIFR here, I'm not totally adverse to it but I'd love to hear pros and cons if this is the case.
EDIT: And for the benefit of semantics, it seems important to me to use an <h1> or similar for the heading, as opposed to Patrick's choice of <p id="logo">.
to this day, there's no perfect image replacement technique for text.
You have two great samples posted by EricWatson. However, they require extra markup. You have to weigh out your own set of principles; what is more important to you? Clean, perfectly semantic code? That would disqualify most techniques.
If your main principle is to have clean code, then there are other image replacement techniques. Those, however, will not work with either CSS or images turned off, which in turn will result into accesssibility issues.
Here's a comparison list of a few techniques that aims to denote the pros and cons of CSS image replacement techniques. (note: Paul's and Eric's more modern solutions aren't listed)
As for sIFR... The main problem with sIFR is its performance overhead and, of course, it requires Flash to be installed on a user's computer. Not only do some people not have Flash installed; some people have Flash installed but block it. The results can be quite nasty.