Hi, I am having some problems with my JavaScript slideshow, basically I have 6 little ball selectors at the bottom of the slideshow that can be clicked by the user, each represents a certain image in the slideshow that is then brought up through my JavaScript. For each of these I want the style to change when its clicked so the ball to go to white when that ball is clicked (current) but then when another ball is selected I want that one to turn white and the other one to go back to normal..... please help asap, its driving me mad!

This is my JavaScript and HTML code (on my HTML the slide 1,2,3,4,5,6 anchor tags are my the ball selectors:

<script type="text/javascript">
<!--
/*these are the functions for the ball selectors for the slideshow gallery*/
function slide1()
{
document.images.slide.src="Images/slide/slide1.jpg";
}

function slide2()
{
document.images.slide.src="Images/slide/slide2.jpg";
}

function slide3()
{
document.images.slide.src="Images/slide/slide3.jpg";
}

function slide4()
{
document.images.slide.src="Images/slide/slide4.png";
}

function slide5()
{
document.images.slide.src="Images/slide/slide5.jpg";
}

function slide6()
{
document.images.slide.src="Images/slide/slide6.jpg";
}
//-->
</script>


HTML-
<img src="Images/slide/slide1.jpg" name="slide" width="700" height="460" id="slideshow"/>

<a class="slide1" onclick="slide1()"> </a>
<a class="slide2" onclick="slide2()"> </a>
<a class="slide3" onclick="slide3()"> </a>
<a class="slide4" onclick="slide4()"> </a>
<a class="slide5" onclick="slide5()"> </a>
<a class="slide6" onclick="slide6()"> </a>