Handling Multiple Web Page Elements with Dynamic Text Replacement with JavaScript - The complete source code of the original text replacement application
(Page 2 of 4 )
In accordance with the concepts deployed in the introduction of this article, my plan basically consists of expanding the original functionality of the JavaScript application that I built previously. As I mentioned, I want to give it the ability to replace any element of a specific web page, not just <h2> headers. But first I'd like to list the complete source code that corresponds to the original application, to help refresh your memory of how it looked.
Having said that, here's the complete code for the original text replacement script:
<!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);
}
}
}
window.onload=function(){
if(document.createElement && document.getElementById &&
document.getElementsByTagName){
replaceTextNodes();
}
}
</script>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #039;
}
h2{
margin: 0;
font: bold 18px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#header{
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #ffc;
}
#navbar{
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #fc0;
}
#navbar ul{
list-style: none;
}
#navbar li{
display: inline;
padding-right: 4%;
}
#navbar a:link,#navbar a:visited{
font: normal 12px Arial, Helvetica, sans-serif;
color: #039;
text-decoration: none;
}
#navbar a:hover{
text-decoration: underline;
}
#mainwrapper{
clear: both;
width: 800px;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background: #eee;
}
#mainwrapper .leftcol{
position: relative;
float: left;
}
#mainwrapper .rightcol{
position: relative;
float: right;
}
#leftbar{
width: 180px;
padding: 10px;
}
#centerbar{
float: left;
width: 380px;
padding: 10px;
background: #fff;
}
#rightbar{
width: 180px;
padding: 10px;
}
#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>
As shown above, the "replaceTextNodes()" JavaScript function does precisely that on the sample web page listed previously. In this case, as I explained before, the function performs the replacement on all the text nodes that correspond to the <h2> headers contained into the web document. This makes it possible to display headers that are image-based rather than text-based.
However, as you can see, the function's functionality is rather limited, since it only targets <h2> elements. Thus, it'd be highly desirable to extend its capacity to provide it with the ability to replace any element of a selected web page.
In the next section I'll show you how to improve the signature of the original text replacement script so it can target all the elements contained into a given web document. To learn how this improvement will be introduced into the initial application, please go ahead and read the next few lines.
Next: Replacing multiple web page elements >>
More JavaScript Articles
More By Alejandro Gervasio
