- #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='#">
<input type=button id=buttonA2 value='A2' onclick="window.location.href='#">
<input type=button id=buttonA3 value='A3' onclick="window.location.href='#">
</tr>
<tr>
<input type=button id=buttonB1 value='B1' onclick="window.location.href='#">
<input type=button id=buttonB2 value='B2' onclick="window.location.href='#">
<input type=button id=buttonB3 value='B3' onclick="window.location.href='#">
</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>
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='#">
<input type=button id=buttonA2 value='A2' onclick="window.location.href='#">
<input type=button id=buttonA3 value='A3' onclick="window.location.href='#">
</tr>
<tr>
<input type=button id=buttonB1 value='B1' onclick="window.location.href='#">
<input type=button id=buttonB2 value='B2' onclick="window.location.href='#">
<input type=button id=buttonB3 value='B3' onclick="window.location.href='#">
</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>