Hi, I’m Jeff Sarmiento, a web designer from
Toronto, Canada and I enjoy making smokin’ websites.

jQuery Image Replacement

33 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 + '" />');
    });
  }
});

Continue reading…

 

to the top