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.
Dynamic Text Replacement with JavaScript - Completing the dynamic text-replacement script (Page 4 of 4 )
As I promised in the prior section of this article, here’s the entire source code for the practical example that you learned before, including the JavaScript function that performs the dynamic text replacement on the pertinent web document. Take a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1" /> <title>Image Replacement Example 2</title> <script language="javascript"> function replaceTextNodes(){ // select all <h2> elements on the web page var h2=document.getElementsByTagName('h2'); if(!h2){return};
// perform text replacement for(var i=0;i<h2.length;i++){
// create <img> element var img=document.createElement('img'); if(h2[i]){
// set <img> attributes img.setAttribute('src','img'+i+'.gif'); img.setAttribute('width','180px'); img.setAttribute('height','30px'); img.setAttribute('alt',h2[i].firstChild.nodeValue);
// replace text with image h2[i].replaceChild(img,h2[i].firstChild); } } }
#footer{ clear: both; width: 780px; padding: 10px; margin-left: auto; margin-right: auto; background: #ffc; } </style> </head> <body> <div id="header"> <h2>This is the header section of the web page</h2> <p>Contents for header section go here. Contents for header section go here. Contents for header section go here. Contents for header section go here.</p> </div> <div id="navbar"> <h2>This is the navigation bar of the web page</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul> </div> <div id="mainwrapper"> <div id="leftbar" class="leftcol"> <h2>This is the left column of the web page</h2> <p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p> </div> <div id="centerbar" class="leftcol"> <h2>This is the center column of the web page</h2> <p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p> <p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p> <p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p> </div> <div id="rightbar" class="rightcol"> <h2>This is the right column of the web page</h2> <p>Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here.</p> </div> </div> <div id="footer"> <h2>This is the footer section of the web page</h2> <p>Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here.</p> </div> </body> </html>
That’s all the source code that you really need to test the Dynamic Text Replacement technique on your own computer system. And naturally, you’re completely free to alter all of the practical examples shown in this article to learn more about how to put this powerful approach to work for you.
Final thoughts
That’s all for the moment. In this first part of the series I walked you through the development of a simple client-side script which makes it possible to replace selected text-based elements of a web page with a few appealing images, without sacrificing too much accessibility.
In the next article of the series, I’ll show you how you how to improve the signature of the original script to provide it with the ability to replace any web page element (not only <h2> headers) with a predetermined image.
Now that you know what the upcoming article will be about, I hope you don’t miss it!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
JavaScript 
Handling Multiple Web Page Elements with Dynamic Text Replacement with JavaScrip
