Dynamic Text Replacement with JavaScript

Introduction

If you’ve been building web sites for long time, then you’ll probably know that text is considered the best format in which to deliver contents to end users. Regardless of the nature of a specific web site, it’s nearly mandatory that it must include concrete, well-structured sections of text, particularly on those topics that are relevant to the web site's context. 

This makes perfect sense when you consider that the web is completely based on the functionality of the well-know Hypertext Transfer Protocol (HTTP for short). Definitely, coding web pages that contain text-based headers, navigation bars and well-defined paragraphs, among other elements, is a big step toward building accessible, standard web documents. The benefits in doing so don’t stop here, since most search engine spiders work much better at indexing text-based contents than other kinds of material.

So, summarizing, it’s clear to see that creating text-based web pages is a good habit, especially when we focus on the advantages of making web documents much friendlier to search engine bots.

But are there any problems with this approach? Well, as you might have guessed, when you provide visitors to your web site with tens of pages that only contain gray, arid text, the whole surfing experience becomes extremely boring and unpleasant. This could cause you to lose precious traffic in the near future.

Also, it’s fair to mention that building a web document by using the three or four font types available on most modern browsers can be a frustrating limitation. This is especially true when you’re trying to release all of your creative inspiration to create a killer web site.

So does this mean that you have to part from those professional web page coding habits and start creating low-quality web sites? Absolutely not! In this case, the assistance of JavaScript can be really useful. Suppose for a moment that you’re developing a web document whose <h2> headers are made of pure text, but you need to make them look slightly more attractive by using a non-conventional font type. How can this be achieved?

Well, it’s possible to create the <h2> headers by using traditional font types, and then after the web page has been loaded, replace them with fancy images via some DOM scripting. Sounds interesting, right? On one hand you’re coding highly standard, text-based headers, and on the other hand JavaScript substitutes appealing graphics (if scripting is enabled in the browser).

This technique, known as Dynamic Text Replacement, was developed originally by Paul Peter Koch. It can be remarkably useful. In the course of this series I’ll be demonstrating its basic implementation with some concrete hands-on examples, and then, with the theory well underway, I’ll show you how to extend its functionality to other cases.

Thus, are you prepared to learn how to put Dynamic Text Replacement to work for you? Let’s begin now!