Checking Browser Image Support for a Dynamic Text Replacement JavaScript Application - Completing the text replacement application: source code
(Page 4 of 4 )
As I expressed in the previous section, the best way to study and test this text replacement application is by putting all its different modules in a single file. This will allow you to easily copy and paste its source code into your favorite editor for further analysis.
Having said that, here's the entire application:
<!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 4 (checking image support)</title>
<script language="javascript">
function replaceTextNodes(elemName){
var testImg=new Image();
testImg.src='test.gif';
testImg.onload=function(){
// 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>
There you have it. The above source code is all the material that you need to start implementing this powerful text replacement technique, and of course, you have complete freedom to change its source code and introduce your own modifications.
Final thoughts
Finally, we've come to the end of this series. Of course, I'd like to give the corresponding credit to Paul Peter Koch for developing the original text replacement script, which I used here as a starting point to create many of the hands-on examples shown in this tutorial. I hope you had learned the key concepts for using this technique, which can be really helpful if you want to make your web pages much more attractive to potential visitors.
See you in the next web development tutorial!
| 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. |
/ 7 
