Originally, I went to the only place I could find regarding highlighting bookmarked areas that are hyperlinked, which was on your forum: forum83/8496.htm. Below is how I added that code to my code with my changes. I finally got it to work in IE6 & FF2, except that the fonts all change to black & font size & type change to simple text once it is highlighted. I also discovered something really strange: if you go to my test site online, & you click on any of the 'descriptive' paragraphs (maincontent), right on the browser, the paragraphs change to black & the font properties change to simple text as well! I just happened to click on it by accident. I thought there might be a conflict between the 'text/css' & the 'text/javascript' elements, so I eliminated one & then switched and eliminated the other—still did the same thing. Do you have any explanation for this? When I used the original javascript script from your site, I needed to adapt it to my page, & perhaps I just can't do what I want it to. I hope this is not the case. Any ideas? Hope you can help. Thanks.
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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 type="text/javascript" src="maincontent.js" ></script>
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[i].onclick = highlightTarget;
contentsArticles[i].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 id="The_Word" class="content"><strong><em> The Word: </em></strong>
"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 id="What_Goes_Around"class="content"><strong><em> What Goes Around: </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>
</div>
</body>
</html>
