Dynamic Text Replacement with JavaScript - Using Dynamic Text Replacement in a concrete case
(Page 2 of 4 )
To demonstrate how Dynamic Text Replacement can be used, I'm going to create a sample web page with a typical three-column layout. In this case, each section of the page will include a few text-based <h2> headers, which as you’ll see shortly will be replaced by some appealing images.
But I’m getting ahead of myself, so first let me show you the definition of this sample web page. It’s as follows:
<!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>
<title>Sample Web Page - contains text-based 'h2'
headers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<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 I explained earlier, the previous web document implements a simple three-column layout, and includes a bunch of text-based <h2> headers. If you execute the above source code on your browser, you should end up with a web page that looks similar to this:
As you can see on the above screen shot, even when the pertinent web page has been spiced up with some raw CSS styles, the corresponding <h2> headers aren’t truly eye-catching elements. Here is where Dynamic Text Replacement comes in. In the section to come I’ll show you how to substitute them with more appealing graphics with the help of JavaScript.
To see how Dynamic Text Replacement will be used in conjunction with the previous web page, please jump forward and read the next few lines. I’ll be there, waiting for you.
Next: Seeing Dynamic Text Replacement in action >>
More JavaScript Articles
More By Alejandro Gervasio
