Disjointed Image Swap in CSS? & Anchor Links

[404notfound]

Any thought on how to do the folowing in CSS?
Basically there are several headers/section on a page, when you click a link at the top of the page it uses an anchor link to zip down the page to the related section. Additionally it "bolds" that sections header to make it stand out from the other section so you can easily see where the anchor has taken you.

http://i16.photobucket.com/albums/b11/NickDCWesley/HTML/swap.gif
(the section header, when clicked, just acts as a "back to top" button)

[404notfound]

I originaly did a page like this using JS Image swaps but it got very code heavy very quickly.
This was one link:
<a title="Section2" href="#sec2"
onClick="
MM_swapImage('a001','','images/section1_a.jpg',1);
MM_swapImage('a002','','images/section2_b.jpg',1);
MM_swapImage('a003','','images/section3_a.jpg',1);
MM_swapImage('a004','','images/section4_a.jpg',1);
MM_swapImage('a004','','images/section5_a.jpg',1);
MM_swapImage('a006','','images/section6_a.jpg',1);
MM_swapImage('a007','','images/section7_a.jpg',1)">
Section 2</a>

Each header has to be "reset" from each link, so for this link it "highlights" the Section2 header it also has to "un-highlight" all of the other headers in case they were "highlighted" before.

I supose there might be a way to do build a JS function that reset all the headers then the link would be more like this:

<a title="Section2" href="#sec2"
onClick="Reset Headers;" MM_swapImage"('a002','','images/lsection2_b.jpg',1);">
Section 2</a>

But i would still like be able to do it in css. My thought is that i could place a single header graphic that contains both the normal and selected states, in the background of a div and then shift the background image when the link is pressed.