Image replacement hypothetical

[candlebain]

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">.

[PicnicTutorials]

Hi, the two best image replacement techniques are here and here. They each work in all conceivable situations.

[candlebain]

I understand the first one...using the positioning to sit the image on top of the actual text which is obscured underneath.

Is the second one working by setting the stacking order of the <b> tag to -1, therefore putting it under the background? Is that one well supported?

[candlebain]

And both require the non-semantic element, right?

So no perfect solution to quote Paul...

[kohoutek]

candlebain,

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.

There are other Javascript/Flash techniques, some of which are listed and compared in these articles:

http://stackoverflow.com/questions/6...vs-typeface-js
http://thinkclay.com/technology/cufon-sifr-flir
http://cssvault.com/blog/2009/07/29/...cejs-and-flir/

Personally, I do like clean, semantic code, but I am also aware of the shortcomings of CSS and HTML, so I'll use non-semantic hooks now and then, if I consider them tolerable for a given project.

[candlebain]

Thanks for the suggestions guys. It's what I figured and I've used similar solutions. It was my hope that a "better" solution was available...but of course, I'm pretending to be a purist.

I appreciate the insights though and will probably implement one of Eric's solutions.

Thanks!

[kohoutek]

Yeah, Paul and Eric's solutions are what I'd go for as well, if the need arose.