Handling Multiple Web Page Elements with Dynamic Text Replacement with JavaScript - Putting the full text replacement application into a single file
(Page 4 of 4 )
Assuming that it will be much easier for you to test this text replacement application if it's located in a single file, I listed the entire source code. Of course I included the improved definition of the "replaceTextNodes()" JavaScript function that you learned before.
<!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</title>
<script language="javascript">
function replaceTextNodes(elemName){
// select all <elemName> elements on the web page
var elems=document.getElementsByTagName(elemName);
if(!elems){return};
// perform text replacement
for(var i=0;i<elems.length;i++){
// create <img> element
var img=document.createElement('img');
if(elems[i]){
// set <img> attributes
img.setAttribute('src','img'+i+'.gif');
img.setAttribute('width','180px');
img.setAttribute('height','30px');
img.setAttribute('alt',elems[i].firstChild.nodeValue);
// replace text by image
elems[i].replaceChild(img,elems[i].firstChild);
}
}
}
window.onload=function(){
if(document.createElement && document.getElementById &&
document.getElementsByTagName){
replaceTextNodes('h2');
}
}
</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>
If you test the previous (X)HTML file on your own browser using the replacement images created in the first article of the series, you'll see that all of the text nodes of the <h2> headers will be properly substituted. Nonetheless, this can be easily changed to perform this substitution on different web page elements. Try it for yourself. Fun is already guaranteed!
Final thoughts
That's all for now. In this second tutorial of the series you learned how to improve the original text replacement application to provide it with the capacity for replacing the text nodes of any web page element.
What's the next step? In the last part of the series I'll be introducing some additional modifications into the previous "replaceTextNodes()" JavaScript function. These will allow it to check, before performing the text replacement task, whether or not images are enabled on the browser.
Now that you've been warned, you won't want to 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. |
