Can't change CSS style for "onClick" text link

[winbach]

Greetings. I am using this code for a photo gallery.

<script language="JavaScript">
function LoadGallery(pictureName,imageFile,titleCaption,captionText)
{
if (document.all)
{
document.getElementById(pictureName).style.filter="blendTrans(duration=1)";
document.getElementById(pictureName).filters.blendTrans.Apply();
}
document.getElementById(pictureName).src = imageFile;
if (document.all)
{
document.getElementById(pictureName).filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
}
</script>

With an onclick statement like this:

<a href="#_self" onclick="LoadGallery('Gallery', 'image.jpg', 'Caption', 'captiontext')">Link</a>

It totally works but I would like to have the "Link" when clicked change from the style designated in the <td> tag below:

<td class="style 1">

To another CSS style .style 2

I am stuck on how to get this to work. I have tried many things with no luck. Do I need another function or could it be added to my gallery script? Thanks for your time and assistance in advance.

Lisa

[~s.o.s~]

<script>
function changeStyle(id, newClass)
{
    document.getElementById(id).style.className = newClass;
}
</script>
....
<td id="oneTd" class="style1" onclick="changeStyle(this.id, 'style2');" >
Hello
</td>

// Or simply in one line

<td id="oneTd" class="style1" onmouseover="this.style.className='style2';">
Hello
</td>

[winbach]

Greetings. Thanks so much for the reply, however, I am still unable to get this to work.
Here is my code for the table cell.

<td width="186" height="257" valign="top" class="portfolionames" id="oneTd">
<p align="right"><a href="#_self" onclick="LoadGallery('WinbachGallery', '/images/TMIB.jpg', 'WinbachCaption', '<BR>FEATURES: Online Quotes, DHTML menus'); changeStyle(oneTd, 'navred')">Tegner-Miller Insurance</a><br>
</p>
</td>

My file is linked to an outsite stylesheet where these style names are listed. Any assistance to solving this is greatly appreciated.

[~s.o.s~]

> changeStyle(oneTd, 'navred')"
The above one should be changeStyle(this.id, 'navred').

If this still doesn't work, post some working code along with sample stylesheet and images so that we can try it out without writing the same code over again.

[zabindia]

The below code what you have suggested earlier doesnt work...

<script>function changeStyle(id, newClass){   
 document.getElementById(id).[B]style.className [/B]= newClass;}
</script>

sytle.className will not work when used with document.getElementById
it should be document.getElementById(id).className

instead u need to use this code

<script>
		function changeStyle(id, newClass){
		document.getElementById(id).[B]className[/B] = newClass;
</script>
	}

<td id="oneTd" class="style1" onclick="changeStyle(this.id, 'style2');" >Hello</td>

[sagedavis]

acutally, you can just use class, since class is the attribute, and I believe that newClass requires quote...

There are times where you have a hard time working with "this.id" use oneTd instead of this.id in your onclick event. since you know what the id is.
Sage

[MidiMagic]

It may be disabled in your browser.

There is a setting to override page colors for links and always use the standard colors.

This is why you should never change the link colors.

[Bubbleboy]

Look guys, none of this works. I have used the code mentioned, using tried both the style.display and style[display] methods. NOTHING works, i still can't get a simp <p> thing to dissapear and its really angering me. Why oh why can't javascript just change this stupid css!