jQuery Image Replacement
While I was building this website I ran into the question of whether or not to use an image replacement technique for its graphical headers. I wanted a technique that kept my web pages accessible, search engine friendly and of course awesome looking. Here is a simple image replacement technique that I whipped up which uses jQuery to replace text with an image. Example and code below:
Bomb Diggity
$(document).ready(function() {
if($('#logo')[0].offsetWidth == 288) {
$('h2.img').each(function() {
string = $(this).text();
filename = string.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');
$(this).html('<img src="/images/' + filename + '.gif" alt="' + string + '" />');
});
}
});
The code uses jQuery to match all <h2> elements on the page that have the class “img”. Then for each matched element, it puts its text contents into a string, formats the string (I’ll explain why in a bit), then replaces the text with an image. The string is then used as the file name for the image that’s inserted. Sorry if that’s confusing but here is what’s going on:
<h2>Bomb Diggity</h2>
The above code is being replaced with this:
<h2><img src="/images/bomb-diggity.gif" alt="Bomb Diggity" /></h2>
I format the string to something that works with the file naming convention of my website by converting the string to lower case, replacing spaces with dashes and only allowing alphanumeric characters. You can tailor this to the file naming convention of your website.
The last step is to only run the image replacement if images are enabled. I did this by wrapping the image replacement code in an if statement that checks the offsetWidth of an existing image on that page, in this case my logo. If the value of offsetWidth does not equal the width of the image on the page, it assumes that images are turned off. The image replacement does not happen and the html header shows as normal.
Please note that this technique was made for my website and works perfectly for how I needed image replacement to work for my website. It may not be suitable for your website or you may prefer another image replacement technique. But if this method works for you, great!
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.
Nice script and I am loving the site design.
Just thought I would let you know the link on the about page for Textmate is incorrect. The correct link is http://macromates.com/ not http://www.textmate.com/.
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)
Beautiful template!
use css property text-indent
Great tutorial, can’t wait to try it out!
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.
Hey Jeff,
As far as I know, using text-indent does not affect screen readers. using ‘display: none’ will though.
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.
bomb diggity indeed!
thanks
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.
Hello Jeff!
Sorry for this offtopic but i’ve been trying to find the name of the font you use in the menu (and comments/leave a comment -boxes). Would you mind sharing it?
btw. i love this layout!
- Antti
@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
You could use
"<h2><span>Bomb Diggity</span></h2>"
and set a background image, height, and width for h2.
Then, in your CSS:
"h2 span{ display: none;}"
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
Hi! I just found your site recently and I’m really loving your designs. I just wanted to ask, why not use sIFR? It seems to achieve the same thing.
Very clever.
Nice site resource, I’m bookmarking you now.
@Deanna: Thanks. sIFR was an option for me but since I was already using the jQuery framework on my site I decided to quickly come up with something using jQuery.
@Pete: Thanks Pete.
