Originally, I went to the only place I could find regarding highlighting bookmarked areas that are hyperlinked. Here is the original javascript code: http://www.webmasterworld.com/forum83/8496.htm. Below is how I added that code to my code with my changes. It now works in IE6, except it doesn't unhighlight, and does not work in FF2 at all. My test site is: http://www.penartdesign.com/testBookmarks/PenArtDesignTest/bookstore1Test_copy(3).html. 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>
currentTarget is null http://www.penartdesign.com/testBoo...e1Test_copy(3).html#Breakfast_at_the_Nut_Tree Line 42 currentTarget should be the target div but it comes empty. first of all, where you have a name="blah" - name has been deprecated, use id="blah" instead. this way the document.getElementByID(elementId) will work and return the relevant section good luck.
Thank you for your advice—it worked fine (though I once tried it, & I guess I didn't do something quite right). However, I discovered something really strange: if you go to my site: http://www.penartdesign.com/testBookmarks/PenArtDesignTest/bookstore1Test_copy(3).html, & you click on any of the 'descriptive' paragraphs, right on the browser, the paragraphs change to black & the font properties change to simple text! 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 (which is very elementary), I needed to adapt it to my page, & perhaps I just can't do what I want it to. Any ideas?? Thanks.