Different Button Background and Text Colors

  • Thread starter jjiimmyy101
  • Start date
  • Tags
    Text
In summary: CSS? In summary, you want the buttons on a page to have different colors when the mouse is over them and when clicked.
  • #1
jjiimmyy101
74
0
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>
 
Technology news on Phys.org
  • #2
I'm not quite following this:
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.
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?
 
  • #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
 
  • #4
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:
<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.
 
  • #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
 

1. What is the purpose of using different button background and text colors?

The purpose of using different button background and text colors is to improve the visual appeal of a website or application. It can also help to create a better user experience by guiding users towards important buttons or actions.

2. How do button colors affect user behavior?

Button colors can have a significant impact on user behavior. Studies have shown that certain colors can stimulate emotions and influence decision making. For example, red is often associated with urgency or importance, while blue is calming and trustworthy.

3. Are there any best practices for choosing button colors?

Yes, there are some best practices for choosing button colors. It is important to consider the overall design and branding of the website or application. Additionally, using a color palette and keeping the color scheme consistent can create a more cohesive and professional look.

4. Can button colors affect accessibility?

Yes, button colors can have an impact on accessibility. It is important to choose colors with enough contrast between the background and text to ensure that users with visual impairments can easily distinguish between them. Additionally, considering color blindness and using alternative indicators, such as icons or text labels, can improve accessibility.

5. Can I use any color for buttons?

While there is no set rule for which colors can or cannot be used for buttons, it is important to choose colors that are visually appealing and align with the overall design of the website or application. It is also important to consider the meaning and associations of colors to ensure they convey the intended message to users.

Similar threads

  • Programming and Computer Science
Replies
9
Views
2K
  • Programming and Computer Science
Replies
9
Views
3K
  • Programming and Computer Science
Replies
3
Views
4K
  • Programming and Computer Science
Replies
12
Views
3K
  • Programming and Computer Science
Replies
6
Views
2K
  • Programming and Computer Science
Replies
13
Views
1K
  • Programming and Computer Science
Replies
9
Views
2K
  • Programming and Computer Science
Replies
1
Views
3K
  • Programming and Computer Science
Replies
2
Views
2K
  • Programming and Computer Science
Replies
2
Views
4K
Back
Top