JAVASCRIPT

Dynamic Text Replacement with JavaScript

As a web site designer and developer, you know that engaging your visitors often means enhancing your site with graphics. You also know that text is important, both for providing those visitors with information and for helping search engine spiders index your site. In this series you will learn how to perform Dynamic Text Replacement, a technique that balances both of those needs.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 10

September 19, 2007

TABLE OF CONTENTS:

<!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 >>