Home arrow JavaScript arrow Page 3 - Dynamic Text Replacement with JavaScript
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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Dynamic Text Replacement with JavaScript - Seeing Dynamic Text Replacement in action
(Page 3 of 4 )

As I stated in the section that you just read, to demonstrate how to replace the <h2> headers of the previous sample web page using the dynamic text replacement technique, I’ll define a JavaScript function to traverse the web document tree, find the mentioned headers, and finally substitute them with some basic images.

Having explained how this brand new function will work, here is its signature:

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);
   
}
 
}
}

Indeed, the definition of the previous “replaceTextNodes()” JavaScript function is very comprehensive. As you can see this function loops over the complete web page tree, finds its <h2> headers, and then replaces their text nodes with some predefined images. Quite simple, right?

Finally, the previous function should be invoked after the web document has been loaded on the browser, in the following way:

window.onload=function(){
 
if(document.createElement && document.getElementById &&
document.getElementsByTagName){
   
replaceTextNodes();
 
}
}

All right, now that you know how the previous JavaScript function does its thing, let's assume that the images that will replace the text nodes corresponding to the <h2> headers of the sample web page can be created as follows:

In that case, the web page displayed on the browser, after performing the aforementioned text replacement would look like this:

In this case, I used some basic graphics to replace the text nodes included into all the <h2> headers of the previous sample web document, but as you surely know, this can be easily modified, and work with more polished images.

So far, so good. At this point you hopefully grasped the programmatic logic that drives this text replacement approach, which can be quite useful when you need to substitute certain text-based elements of a given web document with some eye-catching graphics. However, if you’re anything like me, then possibly you’ll want to see how the complete text replacement application look, right?

Thus, in the final section of this tutorial, I’ll be listing the full source code of the previous hands-on example. This means that you can use it and eventually incorporate it into your own improvements.

Click on the link below and keep reading, please.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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