I’ve used something like that in an older site I did. I never thought about the offsetWidth to determine if images are enabled. Really slick! <3 jQuery.

Or you could just do without javascript entirely — just give the h2 a width, height, and a background image. To hide the text, do “text-align: -1000em” (see my site’s logo for an example)

use css property text-indent

Thanks for the comments guys.

Jordan: I <3 jQuery also

pistachio & KAC: I wanted to come up with a method that I hope keeps my site accessible to screen readers and visitors with images turned off. By displacing the text somewhere off the screen, screen readers do not pick up the text. And with images turned off users see nothing.

I also did not want to have to create a CSS declaration for each header. For example:

#header1 { background: url(header1.gif) }
#header2 { background: url(header2.gif) }
#header3 { background: url(header3.gif) }

Less code is always good

Sorry I should have made these points a little more clear in my initial post.

Steven: Looks like you’re right, text-indent should not affect screen readers. But that still leaves the issue of nothing showing if images are disabled. Since this can be solved using javascript, why not use javascript to make image replacement happen easier.

Although I think the text-indent phark method is still my preferred method (accessible - but nothing shows up when images are disabled), I see the benefits of this.
But if I were you I would abstract it, a little:

function imageReplace(selector) {
$(selector).each(function() {
string = $(this).text();
filename = string.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,”);
$(this).html(”);
});
}

This way, you could call it for multiple replacements across multiple selectors. You could even add src location and image filetype as arguments to the function.

@Johs: Thanks!

@Mark Wunsch: Good stuff. My code works how I need it to for my website so far. But your changes make total sense. Others may need to modify or change the code so it works best for their website.

As a side note jQuery can also be used to match multiple selectors like so:

$('selector1, selector2')...

@Antti: font used is ITC Avant Garde Gothic

trendbreakr: You fail to see the benefits of using Jeff’s technique.
- no need for all the css declarations
- easier to call the replacement
- no unnecessary span’s
- shows text if images are disabled
- accessible to screen readers

Very clever.

Nice site resource, I’m bookmarking you now.

Freakin’ sweet! Thanks for this, it’s helped me solve a couple of big riddles I’ve been fighting with of late.

@Zoe: No problem. Glad this post was of use to you.

@Ed: Thanks for posting your findings. I haven’t used sIFR much yet but it’s good to hear what kind of issues other people are encountering.

Thanks Dan. I agree, it does take a bit to get sifr going correctly. And I don’t mind saving out all the textual images, let’s me get more creative with the headers.

I’ve just one question regarding your jquery technique: Do you need to create all your graphical headers by hand or is there a script in wordpress which can create the files with the desired filenames and save them, so that the jquery script just needs to pick it up? You could alternatively use imagemagick to create the desired images on the fly, but I don’t know if thats accessible at all.

[...] this: jQuery Image Replacement Thinking this looks like a good option. Any [...]