Home arrow JavaScript arrow Dynamic Text Replacement with JavaScript

Dynamic Text Replacement with JavaScript

As a web site designer and developer, you know that engaging your visitors often means enhancing your site with graphics. You also know that text is important, both for providing those visitors with information and for helping search engine spiders index your site. In this series you will learn how to perform Dynamic Text Replacement, a technique that balances both of those needs.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 18
September 19, 2007
  1. · Dynamic Text Replacement with JavaScript
  2. · Using Dynamic Text Replacement in a concrete case
  3. · Seeing Dynamic Text Replacement in action
  4. · Completing the dynamic text-replacement script

print this article

Dynamic Text Replacement with JavaScript
(Page 1 of 4 )


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!

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials