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

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

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

<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>

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

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.

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

> 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.

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

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

<script>function changeStyle(id, newClass){   

 document.getElementById(id).style.className = 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).className = newClass;

</script>

        }

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

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

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

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

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.