function to add style on event

[SSAweb]

Hi,

I need to create a function that applies a style to an image on a certain event.

Background: I am customising a javascript slideshow script which automatically transitions betweeen a number of images. There is also the option to navigate to specific images using numbered icons. I would like to add a style to highlight the numbered icon of the current image. (eg. user clicks icon "4" and image 4 is displayed in the slideshow. icon "4" is then highlighted).

I have located the code which controls the current image state in the slideshow but I'm a bit lost how to create a new function to apply an style to the numbered icons.

 
	constructElements: function() {
		el = this.galleryElement;
		this.maxIter = this.galleryData.length;
		var currentImg;
		for(i=0;i<this.galleryData.length;i++)
		{
			var currentImg = new Fx.Styles(
				new Element('div').addClass('slideElement').setStyles({
					'position':'absolute',
					'left':'0px',
					'right':'0px',
					'margin':'0px',
					'padding':'0px',
					'backgroundPosition':"center center",
					'opacity':'0'
				}).injectInside(el),
				'opacity',
				{duration: this.options.fadeDuration}
			);
			if (this.options.preloader)
			{
				currentImg.source = this.galleryData[i].image;
				currentImg.loaded = false;
				currentImg.load = function(imageStyle) {
					if (!imageStyle.loaded)	{
						new Asset.image(imageStyle.source, {
		                            'onload'  : function(img){
													img.element.setStyle(
													'backgroundImage',
													"url('" + img.source + "')")
													img.loaded = true;
												}.bind(this, imageStyle)
						});
					}
				}.pass(currentImg, this);
			} else {
				currentImg.element.setStyle('backgroundImage',
									"url('" + this.galleryData[i].image + "')");
			}
			this.galleryElements[parseInt(i)] = currentImg;
		}
	},

I attempted to add a function myself but only managed to break the slideshow completely.

Code for slideshow:

        <!-- Slideshow test -->
		<div id="myGallery">
 
            <div class="imageElement"><!-- Slideshow image 1 -->
                <a href="#" title="click for more information" class="open"></a>
                <img src="slide/image1.jpg" width="520" class="full" />
			</div>
            <div class="imageElement"><!-- Slideshow image 2 -->
                <a href="#" title="click for more information" class="open"></a>
                <img src="slide/image2.jpg" width="520" class="full" />
			</div>
            <div class="imageElement"><!-- Slideshow image 3 -->
                <a href="#" title="click for more information" class="open"></a>
                <img src="slide/image3.jpg" width="520" class="full" />
			</div>
 
            <div class="InfoBar"> <!-- Want these to highlight when corresponding image is active -->
                <a href="javascript:myGallery.goTo(0);"><img src="/slide/btn_1a.gif" width="16" height="16" border="0"></a> <!-- numbered icon "1" -->
                <a href="javascript:myGallery.goTo(1);"><img src="/slide/btn_2a.gif" alt="" width="16" height="16" border="0"></a> <!-- numbered icon "2" -->
                <a href="javascript:myGallery.goTo(2);"><img src="/slide/btn_3a.gif" width="16" height="16" border="0"></a> <!-- numbered icon "3" -->
            </div>
		</div>
 
<script type="text/javascript">
  var myGallery;
  var isPaused = 0;
 
function startGallery() {
    myGallery = new gallery($('myGallery'), {
    timed: true,
	delay: 3000,
    showCarousel: false,
    showArrows: false,
    showInfopane: false
    });
}
window.onDomReady(startGallery);
</script>

I know this is a bit of an ask, but I'm sure this is pretty simple for anyone with more Javscript knowledge then me.

Any help will be gretaly appreciated

[SSAweb]

Now that I've spent some time reading and fiddling, I realise that my original post was over-complicated.

Could someone please point me in the right direction on how to change an image onclick - and have it change back when something else is clicked.

thanks