This is an update to my original topic; as I said in the last reply (see "Highlighting Bookmarked Areas"), I've been adapting the original code to my webpage code: So originally, I went to the only place I could find regarding highlighting bookmarked areas that are hyperlinked. Here is the original javascript code: Below is how I added that code to my code with my changes. It now works in IE6, except it doesn't un-highlight, and does not work in FF2 at all. My test site is: Hope you can help. Thanks.
<code>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="bookstore.css" />
<script language="javascript" type="text javascript">
<!—-
function new_win()
{
window.open("buynow1.html","winname","height=206,width=243,left=300,top=300,xscreen=300,yscreen=300");
}
// end -->
function addNormalClass() {
this.className = 'normal';
}
function highlightTarget()
// Collect the relevant items:
var contentsArticles = document.getElementById('maincontent').getElementsByTagName('p')
// Loop through them:
for (var j=0;j<contentsArticles.length;j++) {
if (contentsArticles[j].className == 'highlighted') {
// If one of them has a class name of 'highlighted,' change it to 'normal':
contentsArticles[j].className = 'normal';
}
}
// What is the url of the clicked link?
var url = this.href;
// Get everything after the '#' in the link--that's our id
var elementId = url.substring(url.lastIndexOf('#') + 1);
// Get the element:
var currentTarget = document.getElementById(elementId);
// Change its classname:
currentTarget.className = 'highlighted';
}
function buildContentsArray() {
// First collect all the links to contents and the contents they link to:
var contentsLinks =
document.getElementById('chapters').getElementsByTagName('a');
var contentsArticles =
document.getElementById('maincontent').getElementsByTagName('p');
// Loop through the links:
for (var i=0;i<contentsLinks.length;i++) {
// Call a function when the links are clicked AND when a highlighted article is clicked:
contentsLinks.onclick = highlightTarget;
contentsArticles.onclick = addNormalClass;
}
}
window.onload = buildContentsArray;
</script>
<style type="text/css">
.highlighted { background-color:#008000; }
.normal { background-color:transparent; }
</style>
</head>
<body>
<div id="header">
<img alt="" src="images/BooksInPrintPlusShad.png" width="368" height="60" class="booksInPrintpng" /><br />
<div id="scatleaImage">
<h2>Scattered Leaves</h2>
</div>
<p class="styleBookName">by J. D. Roque</p> <br />
<div id="chapterSamples">Samples of Stories
<div id="storyNames">
<ul id="chapters">
<li><a href="#The_Word">The Word</a></li>
<li><a href="#What_Goes_Around">What Goes Around</a></li>
<li><a href="#Breakfast_at_the_Nut_Tree">Breakfast at the Nut Tree</a></li>
<li><a href="#Party_Time">Party Time in Old Greece</a></li>
<li><a href="#Dog_Days_and_Old_Bones">Dog Days and Old Bones</a></li>
<li><a href="#Day_in_the_Life_of_Moonbeam">Day in the Life of Moonbeam</a></li>
<li><a href="#Apples_and_Oranges">Apples and Oranges</a></li>
<li><a href="#First_Cutting">First Cutting</a></li>
<li><a href="#A_Song_For_Sarah_Lee">A Song for Sarah Lee</a></li>
<li><a href="#From_Salon_to_Salvation">From Salon to Salvation</a></li>
<li><a href="#Saving_Harry_Bowles">Saving Harry Bowles</a></li>
</ul>
</div>
</div>
</div>
<!--This is just an example of the "maincontent"; The Word & What Goes Around-->
<div id="maincontent">
<h2 class="aboutStories">Samples</h2>
<p class="content"><em><strong><a name="The_Word">The Word</a>: </strong></em>
"At our house, the penalty for uttering <em>the word</em> is to get your mouth
washed out with the yellow Fels Naphtha soap Ma uses when she mops the wood
floors.<br />
"Erik--he's my older brother--used to say it all the time, so
he had the cleanest teeth among any of us kids."</p>
<p class="content"><strong><em><a name="What_Goes_Around">What Goes Around:</a> </em></strong>
"Although Archibald Diggs departed the company of his bar pals in a well
developed state of inebriation, he could not shake the feeling that he was
pedaling away from something very much amiss back there behind The Yellow
Ribbon Bar & Grill. He had covered less than a mile when curiosity
brought him to a stop against a bus-stop bench. He closed his eyes,
trying to get his thoughts together. <em>What if it isn't just some
hobo looking to bed down in the weeds? What if it is a terrorist come
to blow Greendale to hell and back right off the map...what if...?</em>"</p>
<code>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="bookstore.css" />
<script language="javascript" type="text javascript">
<!—-
function new_win()
{
window.open("buynow1.html","winname","height=206,width=243,left=300,top=300,xscreen=300,yscreen=300");
}
// end -->
function addNormalClass() {
this.className = 'normal';
}
function highlightTarget()
// Collect the relevant items:
var contentsArticles = document.getElementById('maincontent').getElementsByTagName('p')
// Loop through them:
for (var j=0;j<contentsArticles.length;j++) {
if (contentsArticles[j].className == 'highlighted') {
// If one of them has a class name of 'highlighted,' change it to 'normal':
contentsArticles[j].className = 'normal';
}
}
// What is the url of the clicked link?
var url = this.href;
// Get everything after the '#' in the link--that's our id
var elementId = url.substring(url.lastIndexOf('#') + 1);
// Get the element:
var currentTarget = document.getElementById(elementId);
// Change its classname:
currentTarget.className = 'highlighted';
}
function buildContentsArray() {
// First collect all the links to contents and the contents they link to:
var contentsLinks =
document.getElementById('chapters').getElementsByTagName('a');
var contentsArticles =
document.getElementById('maincontent').getElementsByTagName('p');
// Loop through the links:
for (var i=0;i<contentsLinks.length;i++) {
// Call a function when the links are clicked AND when a highlighted article is clicked:
contentsLinks.onclick = highlightTarget;
contentsArticles.onclick = addNormalClass;
}
}
window.onload = buildContentsArray;
</script>
<style type="text/css">
.highlighted { background-color:#008000; }
.normal { background-color:transparent; }
</style>
</head>
<body>
<div id="header">
<img alt="" src="images/BooksInPrintPlusShad.png" width="368" height="60" class="booksInPrintpng" /><br />
<div id="scatleaImage">
<h2>Scattered Leaves</h2>
</div>
<p class="styleBookName">by J. D. Roque</p> <br />
<div id="chapterSamples">Samples of Stories
<div id="storyNames">
<ul id="chapters">
<li><a href="#The_Word">The Word</a></li>
<li><a href="#What_Goes_Around">What Goes Around</a></li>
<li><a href="#Breakfast_at_the_Nut_Tree">Breakfast at the Nut Tree</a></li>
<li><a href="#Party_Time">Party Time in Old Greece</a></li>
<li><a href="#Dog_Days_and_Old_Bones">Dog Days and Old Bones</a></li>
<li><a href="#Day_in_the_Life_of_Moonbeam">Day in the Life of Moonbeam</a></li>
<li><a href="#Apples_and_Oranges">Apples and Oranges</a></li>
<li><a href="#First_Cutting">First Cutting</a></li>
<li><a href="#A_Song_For_Sarah_Lee">A Song for Sarah Lee</a></li>
<li><a href="#From_Salon_to_Salvation">From Salon to Salvation</a></li>
<li><a href="#Saving_Harry_Bowles">Saving Harry Bowles</a></li>
</ul>
</div>
</div>
</div>
<!--This is just an example of the "maincontent"; The Word & What Goes Around-->
<div id="maincontent">
<h2 class="aboutStories">Samples</h2>
<p class="content"><em><strong><a name="The_Word">The Word</a>: </strong></em>
"At our house, the penalty for uttering <em>the word</em> is to get your mouth
washed out with the yellow Fels Naphtha soap Ma uses when she mops the wood
floors.<br />
"Erik--he's my older brother--used to say it all the time, so
he had the cleanest teeth among any of us kids."</p>
<p class="content"><strong><em><a name="What_Goes_Around">What Goes Around:</a> </em></strong>
"Although Archibald Diggs departed the company of his bar pals in a well
developed state of inebriation, he could not shake the feeling that he was
pedaling away from something very much amiss back there behind The Yellow
Ribbon Bar & Grill. He had covered less than a mile when curiosity
brought him to a stop against a bus-stop bench. He closed his eyes,
trying to get his thoughts together. <em>What if it isn't just some
hobo looking to bed down in the weeds? What if it is a terrorist come
to blow Greendale to hell and back right off the map...what if...?</em>"</p>