Handling Multiple Web Page Elements with Dynamic Text Replacement with JavaScript
(Page 1 of 4 )
If you're an enthusiastic web designer, then you know that text-based web pages can be rather boring to potential visitors. Often, then, you'll find yourself faced with the following dilemma: how do you create eye-catching web page elements that are, at the same time, highly accessible? Keep reading for a solution.
Introduction
The answer to that question is a technique known widely as Dynamic Text Replacement. If you're interested in learning its foundations, you should start reading this article now! Welcome to the second installment of the series that began with "Dynamic Text Replacement with JavaScript." As its name suggests, the dynamic text replacement approach lets you substitute certain text-based portions of a selected web page with attractive images, while keeping its accessibility nearly the same.
Now that I have introduced the subject covered by this series of articles, let me offer you a quick summary on the topics that I discussed in the first article. As you'll possibly remember, in that tutorial I developed a simple JavaScript application to replace the pertinent text nodes includes into all the <h2> headers of a sample web document with a few basic images, in this way implementing the so-called text replacement approach.
The main advantage of this method rests upon the possibility of using different font types, or even polished graphics, to build certain sections of a given web page (its headers, for instance) without sacrificing the level of accessibility offered by text-based elements.
As you hopefully learned by the practical example developed in the previous article, the logic that stands behind the text replacement approach is very simple to grasp. At the same time, however, it provides web developers with yet another way to build appealing yet accessible web sites.
All right, I believe that you now remember how to build a simple text replacement application with JavaScript. However, the initial script built in the previous tutorial lacked some important features, like the ability to replace any element of a web page. Therefore, in the next few lines I'll introduce some minor modifications to the script in question to make it capable of substituting multiple sections of a web document.
Now that I have introduced the theme of this second tutorial of the series, let's move forward and learn how to improve the original text replacement script that I built previously. Let's go!
Next: The complete source code of the original text replacement application >>
More JavaScript Articles
More By Alejandro Gervasio
