Kevin Hale's JS+CSS Image Replacement Technique

Originally published here on ParticleTree.

How it works

This JavaScript and CSS combination works by combing through your styles looking for any styles with a particular declaration-value set. In this case, a background-image that is given fixed 5000px 5000px position. That declaration says "Hey, JavaScript, I want to be the subject of your nifty image-replacement technique!". The JS then changes the style to render as though the text node (the DOM element for words within tags) were far off of the screen leaving only the background image. Because no changes are made to HTML Markup itself, the HTML document maintains it's semantic integrity.

Step-by-step Demo

  1. Start with a plain header and give it an Id. (You could give it a class, but then every instance of the class would have the exact same image which wouldn't make sense unless they had the same text too!)
    <h3 id="KHIR_demo">This is my boring header- It is the #1 best!</h3>
  2. Create an image for your text in your unique font/color. I've used a sheet-music font called "Opus Chords".
    Demo image for image replacement

    This is a standard <img> tag. If you click it and drag it you may see it's "ghost" move around with your mouse.

    It may be the case that you don't want a particularly ornate font choice, you just want to make 100% sure that every user with JS, CSS and images enabled can see your heading in "Andale Mono", for instance, even if it's not on their computer. In this case it's very easy write up your page with your chosen font and then just take a screenshot to extract your image. The CSS rule to generate my image was: 
    #KHIR_demo { 
    font: 1.6em "Opus Chords"; 
    word-spacing: .6em; 
    color: #700;
}
    Embedded style in this document. Commented out after a screenshot of the text was taken.
  3. Write your replacement CSS rule. If you made your image like I did, be sure to delete or comment-out the previous rule. 
    #KHIR_demo { 
    width: 442px;
    height: 26px;
    background: url(images/KHIR_demo.png) no-repeat fixed 5000px 5000px;
}
    Embedded style in this document contains the "flag" that the JS file will pick up on.
    Be sure to include the width and height attributes, otherwise the space will collapse. Also remember to "flag" the JavaScript by putting in "fixed 5000px 5000px".
  4. Download and link to Kevin's JS file from the <head> of your document with the following code:
    <script type="text/javascript" src="cssImgReplace.js"></script>
    The code is very thoroughly documented explaining how it works. You can delete the extra documentation if you want to reduce the file size by 70%, but be sure to leave a credit in.
  5. Check out the results!

    This is my boring header- It is the #1 best!

    If you check out the HTML code, you'll see that above is actually an <h3> tag. You can tell the image is embedded in the background because you cannot drag it's "ghost" and you cannot select it's text. Also, you can tell it's not regular text by zooming in and seeing resolution deficiencies.

How it doesn't work: Hangups!

While preparing the demo, all of a sudden the display at step 5 broke. What I found was that in order to make sure the JavaScript had CSS to modify, the styles, both embedded and linked, had to come before the <script> tag. Originally I put all the styles into an external sheet and that worked fine, but once I moved the relevent demo styles for #KHIR_demo into an embedded stylesheet for easier viewing (by you... ), it broke! To get it rendering properly now I've had to list the embedded stylesheet before the linked one, and both of those before the <script> tag.

This method has some real potential... !