Changing pseudo class state with JavaScript?

[MarcMiller]

Hi, I have a pure CSS button which acts as a switch turning a timed JavaScript slideshow on and off. I mean there are two messages that appears the on these buttons one is"Click here to stop picture changing" and the other is "click here to resume picture changing" there is also CSS pseudo classes which changes the color and size of the buttons with pseudo class state hover. The other pseudo class states or a <a> tag are also in the CSS. I have tried all different ways of creating CSS rules to have the visited pseudo class state return once the slideshow proceed status is changed using the switch I provide however the size and color of my CSS switch will not return when using this CSS as a toggle switch in Firefox. Everything works in Opera and Internet Explorer and this same CSS works fine for a pure CSS navigation button. It's just as a toggle switch in Firefox that I am having trouble. The CSS rules I was trying to use to get everything to work is below.

li a:link, li a:visited {
line-height: 100%;
color: black;
font-family: Verdana, Geneva, Arial, sans-serif ;
font-size: 75%;
line-height: 118%;
font-weight: normal;
word-spacing: -.1em;
letter-spacing: 0.1em;
text-align: center;
text-decoration: none;
border-top: 3px solid #8DACCD;
border-left: 3.5px solid #8BAACB;
border-bottom: 3.7px solid #496161;
border-right: 3.7px solid #496161;
background-color:#C6E0F7;
padding: .2em 0 .3em 0;
display: block;
width: 100%;
}


li a:focus, li a:hover {
color:#000000;
background-color: #9bb0c2;
border-top: 1px solid #8baccc;
border-left: 1.5px solid #8baccc;
border-bottom: 1.7px solid #415757;
border-right: 1.7px solid #415757;
padding-top: 2px;
padding-bottom: 2px;
}

li a:active {
line-height: 100%;
color: black;
font-family: Verdana, Geneva, Arial, sans-serif ;
font-size: 75%;
line-height: 118%;
font-weight: normal;
word-spacing: -.1em;
letter-spacing: 0.1em;
text-align: center;
text-decoration: none;
border-top: 3px solid #8DACCD;
border-left: 3.5px solid #8BAACB;
border-bottom: 3.7px solid #496161;
border-right: 3.7px solid #496161;
background-color:#C6E0F7;
padding: .2em 0 .3em 0;
display: block;
width: 100%;
}


The HTML it's attached to.


<ul>
<li ><a href="Fantasy_Bob_Home.html">Fantasy Bob Home Page return</a></li>
<li id=image_hight><img src="wedding_HQ/HQ5.jpg" id="slide" alt="Wedding Slideshow"/></li>
<li><a href="#" onclick="buttonStateChanger()" id="a1" title="Toggling
switch with switching message" longdesc="TogglingSwitch.html">
Click here to stop picture changing
</a></li>
</ul>

The relevant JavaScript code is below.


var nextSlide = true;
function buttonStateChanger()
{
var varA1 = document.getElementById("a1");
if (nextSlide== true) {
nextSlide = false;
varA1.firstChild.nodeValue="click here to resume picture changing";
}
else {
if (nextSlide== false) {
nextSlide = true;
varA1.firstChild.nodeValue="Click here to stop picture changing";
}
}
}

So can anyone think of a solution to this not return to pre-visited state pseudo code problem on having. Or does anyone know exactly where pseudo class status is held in the DOM. Or anything that can get me started solving this problem.
Sincerely
Marc Miller

[masonbarge]

I haven't had any luck with this, either, although I haven't really given it any effort. Anyway, I know what I would do -- use javascript for the button events.