Checking Browser Image Support for a Dynamic Text Replacement JavaScript Application - Reviewing the previous text replacement application
(Page 2 of 4 )
In my articles on web development I like to reintroduce the original source code of an application before applying any changes to it. Therefore, below I listed the complete source code of this text replacement application as it was developed during the previous article of the series.
Here is the corresponding code sample:
<!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>
As shown previously, the above (X)HTML file implements in a simple fashion the text replacement approach. Of course, as you can see, in this case the respective text nodes of all the <h2> headers contained in the prior web document will be replaced with some basic images, but since the definition of the pertinent "replaceTextNodes()" JavaScript function is very flexible, it's perfectly possible to implement the replacement with other web page elements. Quite easy to grasp, right?
So far, so good. At this stage I'm pretty sure that using the text replacement approach is already a familiar process to you. Therefore, in the next section I'll show you how to modify the signature of the previous "replaceTextNodes()" JavaScript function so it can verify programmatically if the browser in which the text replacement will occur has the appropriate support for images.
To see how this modification will be done, please click on the link below and keep reading.
Next: Adding image support checking >>
More JavaScript Articles
More By Alejandro Gervasio
/ 7 
