Different Button Background and Text Colors

  • Thread starter Thread starter jjiimmyy101
  • Start date Start date
  • Tags Tags
    Text
AI Thread Summary
The discussion revolves around creating interactive buttons on a webpage that change colors based on mouseover and click events. Initially, all buttons should display black text on a white background. Upon hovering, each button in Row A changes to specific colors: "A1" to blue text and orange background, "A2" to red text and black background, and "A3" to green text and silver background. When a button is clicked, it retains its hover colors while the others revert to the original black and white scheme. The same functionality is desired for Row B with different colors, ensuring that the rows operate independently.The user seeks assistance with their existing JavaScript code, which only partially achieves the desired effect. Suggestions from other participants include utilizing CSS for hover effects and considering a more streamlined approach using PHP to manage the button states. The goal is to maintain visual feedback for users while navigating between different frames on the website.
jjiimmyy101
Messages
74
Reaction score
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
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?
 
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
 
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.
 
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
 

Thread 'Learning Assembly and computer architecture for x86'

Dear Peeps I have posted a few questions about programing on this sectio of the PF forum. I want to ask you veterans how you folks learn program in assembly and about computer architecture for the x86 family. In addition to finish learning C, I am also reading the book From bits to Gates to C and Beyond. In the book, it uses the mini LC3 assembly language. I also have books on assembly programming and computer architecture. The few famous ones i have are Computer Organization and...
View full post »

Thread 'Learning data structures and algorithms in different programming languages'

I have a quick questions. I am going through a book on C programming on my own. Afterwards, I plan to go through something call data structures and algorithms on my own also in C. I also need to learn C++, Matlab and for personal interest Haskell. For the two topic of data structures and algorithms, I understand there are standard ones across all programming languages. After learning it through C, what would be the biggest issue when trying to implement the same data...
View full post »

Similar threads

Having trouble updating Button color in Tcl/Tk -- UPDATE: Figured it Out
Replies
9
Views
3K
How Can I Highlight Text Background When Hovering Over Radio Buttons?
Replies
3
Views
5K
Why do emails from my contact form bounce?
Replies
10
Views
3K
Java Javascript multiplication tables
Replies
9
Views
4K
JavaScript Changing textContent color in table at run time
Replies
12
Views
3K
HTML/CSS Html5 <canvas> element related apps not working
Replies
3
Views
2K
Java Javascript/JQuery Nav Button Highlighting
Replies
2
Views
3K
Text color detection algorithm giving pixels of text
Replies
6
Views
3K
JavaScript Need insert of mathcode in Table element
Replies
13
Views
2K
Python Loging into a webpage using python.
Replies
2
Views
5K

Hot Threads

Recent Insights

Back
Top