JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jun 2007
Posts: 2
Reputation: winbach is an unknown quantity at this point 
Solved Threads: 0
winbach winbach is offline Offline
Newbie Poster

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

 
0
  #1
Jun 24th, 2007
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,623
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 468
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

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

 
0
  #2
Jun 24th, 2007
javascript Syntax (Toggle Plain Text) 
  1. <script>
  2. function changeStyle(id, newClass)
  3. {
  4.     document.getElementById(id).style.className = newClass;
  5. }
  6. </script>
  7. ....
  8. <td id="oneTd" class="style1" onclick="changeStyle(this.id, 'style2');" >
  9. Hello
  10. </td>
  11.  
  12. // Or simply in one line
  13.  
  14. <td id="oneTd" class="style1" onmouseover="this.style.className='style2';">
  15. Hello
  16. </td>
Last edited by ~s.o.s~; Jun 24th, 2007 at 10:40 pm.
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 2
Reputation: winbach is an unknown quantity at this point 
Solved Threads: 0
winbach winbach is offline Offline
Newbie Poster

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

 
0
  #3
Jun 24th, 2007
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,623
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 468
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

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

 
0
  #4
Jun 25th, 2007
> 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.
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2008
Posts: 5
Reputation: zabindia is an unknown quantity at this point 
Solved Threads: 0
zabindia zabindia is offline Offline
Newbie Poster

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

 
0
  #5
Feb 27th, 2008
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>
	}
html Syntax (Toggle Plain Text) 
  1. <td id="oneTd" class="style1" onclick="changeStyle(this.id, 'style2');" >Hello</td>
Last edited by peter_budo; Feb 27th, 2008 at 3:48 pm. Reason: Extensive use of colour tags is not best idea
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2007
Posts: 86
Reputation: sagedavis is an unknown quantity at this point 
Solved Threads: 6
sagedavis sagedavis is offline Offline
Junior Poster in Training

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

 
0
  #6
Feb 27th, 2008
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

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

 
0
  #7
Mar 1st, 2008
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column cookies createrange() css cursor dependent disablefirebug dom download dropdown editor element engine error events explorer ext file form forms google gwt gxt hiddenvalue highlightedword html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump libcurl math media microsoft mimic object onerror onmouseoutdivproblem onreadystatechange parent pdf php player post problem progressbar rated rating regex runtime scroll search security select session shopping size software sql star stars synchronous text textarea unicode validation w3c web website window windowofwords windowsxp wysiwyg xml \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC