Sketch Diary Web Portfolio: dJIR: Dynamic JavaScript Image Replacement

dJIR: Dynamic JavaScript Image Replacement

What is this?

It is an image replacement technique that relies on JavaScript to replace text with a dynamic image. In some browsers, like Opera or Mozilla, it can dynamically resize the text, based on the user's settings. Otherwise, the PHP script for creating the text image tries its best to resize and wrap the text.

Where can I see it?

You're looking at it. All of the headlines found inside div#body are dynamically generated with our replaceText function. This code is strongly based on PPK's image replacement technique.

Improvements made from PPK's image replacement technique

Added support for mouseovers
Preserves links (provided the link is the first child of the element)
The function replaceBg() is also included, which converts the text to a background image via CSS (a class name of fir is applied to all elements using this method)

How is this different from other image replacement solutions?

The font size found in the image can be resized.
Even with images turned off, an alt attribute is still visible, unlike most FIR methods.
No additional spans or other unnecessary markup is required
Supports mouseovers and links no problem
No additional plugins required

Where is a good place to use it?

Sites that require dynamically sized text
Sites with headlines that frequently change
Sites with dynamically generated content

Where is not a good place to use it?

High traffic sites
Areas with static content
Areas where dynamically sized text is not necessary

Note: Using static images, rather than dynamically created images, is perfectly fine to use in any of these instances.

Other Examples

This is a Background Image, it works best on block elements

Requirements

What script would be complete without requirements?

Browser must support DOM (getElementById and getElementsByTagName).
Browser must convert font-size to pixels if you want dynamic resizing of text to work as intended.
Server must support some form of dynamic image generation with font support (demo PHP script uses GD2 + FreeType 2) for dynamic images

The Source

Keep in mind that these files are subject to change at any time.

Files
Filename	Purpose	Last Modified
common.js	Initializes our replacements	Jan 09, 2006 11:19 EST
texttoimage.js	Library to make convert text to images	Feb 14, 2006 12:23 EST
class.maketext.php	Creates the dynamic images (optional)	Jan 18, 2010 17:15 EST

Browser Support

Tested Browsers
Browser Name	Version	Supported
Opera	8.x	Yes
Opera	7.x	Yes
Opera	6.x	No
Mozilla	1.x	Yes
Netscape	7.x	Yes
Netscape	6.x	Yes
Netscape	4.x	No
Internet Explorer (Win)	6.0	Yes ¹
Internet Explorer (Win)	5.0	Yes ¹ ²
Safari	1.x	Yes ³

¹ Internet Explorer does not calculate font-size to a pixel value, instead it sends the exact CSS specified values. This only matters if you are using dynamic images.

² Internet Explorer 5.0 supports all of the javascript just fine. However, it does not properly support many of the CSS techniques used for hiding the text. Using replaceText is the preferred method for this version.

³ Safari is unable to determine certain CSS information necessary to pass to the dynamic image generating script.

Change Log

Feb 14, 2006 - Fixed incorrect removal of child elements while using toImage() with nested tags.
Dec 25, 2005 - Fixed FoUC in Opera while using toBackground() by preloading the images. Images off screen were failing to load until the user scrolled to see them.
Dec 23, 2005 - Fixed link preservation so that the original link is preserved, rather than creating a brand new link element.
Dec 15, 2005 - Added support for outright replacing text nodes with an image element.
Oct 22, 2004 - Project started.

Credits

Mike D.: Though his sFIR concept deals with Flash, it made me think maybe the same thing could be applied to server side image generation scripts.
Peter Paul Koch (aka PPK): While attempting to perfect my code, this site has been an excellent resource, especially the ascii diagrams of how childNodes work.

Sketch Diary Portfolio

Portfolio