June 5th, 2008
jQuery Image Replacement
18 Comments
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 + '" />');
});
}
});
