Skip navigation
Reece92
Currently Being Moderated

Help: Changing the Font Colour of Text in a Table Using Button

May 4, 2012 4:56 AM

Tags: #cs3 #button #table #colour_changer #font_colour

Hello everyone,

 

I am designing a website for a college project in Dreamweaver CS3. I am currently trying to implement accessibility for users, by creating a background/font colour changer. By making the table transparent, I am now able to make the whole background colour change. However, I am struggling to change the font colour.

 

To see what I mean, here is the website so far: http://itsupport.comlu.com/index.html

 

At the top left, you'll notice buttons. This is the colour changer.

 

The problem of course, is that the text is unreadable when I change to say, a white background.

 

The following is my code for the buttons:

 

<!--Colour Changer-->

<form>

<input type="button"

value="White" style="Background: white;"

onClick="document.body.style.backgroundColor = '#FFFFFF';Table1.fgColor='#000000';">


<input type="button"

value="Green" style="Background: green;"

onClick="document.body.style.backgroundColor = '#008000';document.fgColor='#FFFF00';">


<input type="button"

value="Blue" style="Background: blue;"

onClick="document.body.style.backgroundColor = '#0000CC';document.fgColor='#FFFFFF';">


<input type="button"

value="Red" style="Background: red;"

onClick="document.body.style.backgroundColor = '#FF0000';document.fgColor='#FFFF00';">

</form>

 

The table is named "Table1". I am guessing that I have to refer to this in some way, but I have no idea how. You can see in the White button code I have tried "Table1.fgColor" as well as some similar variations.

 

I know many of you will just say "don't use tables". Yeah, I learned that the hard way. Unfortunately I don't have long to complete this project so I do not wish to recreate the entire website using div tags.

 

Thanks in advance!

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 4, 2012 5:16 AM   in reply to Reece92

    I'd highly recommend that you check out Jar Two's Wheel Color Picker and let users customize end-to-end. This is a jQuery plugin and is fully cross-compatible unlike the form buttons to change colors. Visit this page: http://www.jar2.net/projects/jquery-wheelcolorpicker

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 4, 2012 5:17 AM   in reply to Reece92

    If you're looking at choosing the right set of colors, try out http://kuler.adobe.com - a brilliant place to start for color combinations/ swatches.

     
    |
    Mark as:
  • Currently Being Moderated
    May 4, 2012 5:23 AM   in reply to Reece92

    You most likely need to do this with a css style switcher. Here's one that uses jquery.

     

    http://www.cssnewbie.com/example/stylesheet-switcher/

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 6, 2012 10:07 AM   in reply to Reece92

    You could download the .js files from the example site you referred to. Or, you could use a CDN hosted service and link your page to the .js files from there.

     

    You could link jquery.js from Google -  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

     

    Code will be within your <head></head> tags as follows:

     

    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    You could also download these .js files locally and link them on your own server.

     

    This is a jQuery CDN repository: http://code.jquery.com/

    You could also use other CDN's - http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points