Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Different Button Background and Text Colors

  1. Aug 11, 2009 #1
    I hope someone can help me. Here's the situation...

    When the page first loads, I want all the buttons to look the same (Black text and white background).

    When I put the mouse over "A1" I want the text to be "blue" and the background to be "orange".
    When I put the mouse over "A2" I want the text to be "red" and the background to be "black".
    When I put the mouse over "A3" I want the text to be "green" and the background to be "silver".

    Then when I click on one of the buttons in "Row A", I want that button to change to the colors that appear on the mouseover and the other two to stay black and white.

    I want the same thing to happen in "Row B" but with different colors. (Essentially I want the rows to be independent of each other).

    Is there any way to accomplish this? The code I've posted below only partially does what I want it to do. Any help would be appreciated. Thanks. -jjiimmyy101


    ==============

    <html>
    <body>

    <div align="center">


    <table border="0" cellpadding="5" cellspacing="0" width="100%">

    <tr>

    <input type=button id=buttonA1 value='A1' onclick="window.location.href='#">&nbsp;
    <input type=button id=buttonA2 value='A2' onclick="window.location.href='#">&nbsp;
    <input type=button id=buttonA3 value='A3' onclick="window.location.href='#">&nbsp;

    </tr>

    <tr>

    <input type=button id=buttonB1 value='B1' onclick="window.location.href='#">&nbsp;
    <input type=button id=buttonB2 value='B2' onclick="window.location.href='#">&nbsp;
    <input type=button id=buttonB3 value='B3' onclick="window.location.href='#">&nbsp;

    </tr>

    </table>


    <script language=JavaScript>

    //---- Choice of variables ----\\

    m_over_col="orange"
    m_out_col="white"
    m_down_col="green"

    m_over_col_tx="blue"
    m_out_col_tx="black"
    m_down_col_tx="red"

    //---------The description---------\\
    /*
    m_over_col - background of buttons at MouseOver
    m_out_col - background of buttons at MouseOut and initial colors
    m_down_col - background of buttons at MouseDown

    m_over_col_tx - Color of text in buttons at MouseOver
    m_out_col_tx - Color of text in buttons at MouseOut and initial colors
    m_down_col_tx - Color of text in buttons at MouseDown
    */
    //----------------------------------\\


    dow_key=''
    window.onload=recolor_butt

    function recolor_butt()
    {
    len_all=document.all.length
    for (i=0; i<len_all; i++)
    {
    id=document.all.id
    if (id.indexOf('butt')==0)
    {
    document.all.style.background=m_out_col
    document.all.style.color=m_out_col_tx
    }
    }
    }

    function document.onmouseover()
    {
    id=window.event.srcElement.id
    if (id.indexOf('butt')==0)
    {
    if(dow_key==id){return}
    document.all[id].style.background=m_over_col
    document.all[id].style.color=m_over_col_tx
    }
    }

    function document.onmouseout()
    {
    id=window.event.srcElement.id
    if (id.indexOf('butt')==0)
    {
    if(dow_key==id){return}
    document.all[id].style.background=m_out_col
    document.all[id].style.color=m_out_col_tx
    }
    }

    function document.onmousedown()
    {
    id=window.event.srcElement.id
    if (id.indexOf('butt')==0)
    {
    if(dow_key!=''){
    document.all[dow_key].style.background=m_out_col
    document.all[dow_key].style.color=m_out_col_tx
    }
    dow_key=id
    document.all[id].style.background=m_down_col
    document.all[id].style.color=m_down_col_tx
    }
    }
    </script>

    </body>
    </html>
     
  2. jcsd
  3. Aug 11, 2009 #2

    minger

    User Avatar
    Science Advisor

    I'm not quite following this:
    That looks like a lot of code for something that seems easy to do in CSS. For the mouse over, check out the .hover pseudo class.

    unless, you want this all to happen on one single static page? Is this part of some game?
     
  4. Aug 11, 2009 #3
    Hopefully, I can explain this better. On my website that I'm creating, I have multiple frames. In one frame I have those buttons (A1, A2, A3, B1, etc.). When I click on one of the "A" buttons I want the corresponding page from that button to load in the "A" frame. When I click on one of the "B" buttons I want the corresponding page from that button to load in the "B" frame. When I click on one of the "C" buttons I want the corresponding page from that button to load in the "C" frame. And so on.

    From a visual standpoint, when the mouse is over a button, I want it to change text color and background to show the user which button the mouse is over and then when clicked I want the button text color and background to hold those colors until a different button is clicked. Also, I want each row of buttons to be independent of the next and each button has different colors associated with it.

    Can this be done?

    -jjiimmyy101
     
  5. Aug 11, 2009 #4

    minger

    User Avatar
    Science Advisor

    When the user clicks a button, he is transferred to another page correct? If so, then you can use the CSS to cover the mouseover effects, those are easy; as I mentioned check out the hover pseudo class.

    As for the colors staying, you can have something like this:
    Code (Text):

    <ul>
    <li id=A1>First Button
    <li id=A2>Second Button
    <li id=A3_active>Third Button (that the user just clicked)
    </ul>
    <ul>
    <li id=B1>Second row first button
    ...so on
     
    Now, in you CSS, you would have to define css parameters for each button. An alternate easier way would be to have one single page (instead of rows*buttons) where a php variable is passed along which tells the code which button has been pressed.
     
  6. Aug 13, 2009 #5
    Okay, thanks for the input. I will give your suggestions a go and if I have any further questions, I'll be back :wink:

    -jjiimmyy101
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook




Similar Discussions: Different Button Background and Text Colors
  1. Win32 Radio button (Replies: 1)

Loading...