changing bgcolor and font color on mouseover [Archive]

Click to See Complete Forum and Search --> : changing bgcolor and font color on mouseover

tripwater

02-19-2004, 01:11 PM

Hello,

I have a menu that when you mouse over the TD the bgcolor changes color. I found that on some screens the text color gets lost in the new color so I would like to also change the font color on the TD mouse over as well not on the mouseover of the text itself.

Here is the site:

www.nizex.com (http://www.nizex.com)

I would like to change the text to black when you mouseover the TD

Thanks for any help.

BrainDonor

02-19-2004, 02:16 PM

Keep in mind...I'm a noob...but here's something that should help. The other guys (the real javascript gurus) can simplify this even more I am sure.

<html>
<head>

<title>NizeX Project System</title>

<style>
a {
color: FFFFFF;
font-size:9pt;
font-family:arial,sans-sarif;
text-decoration:none;
}

a:hover {
color: 000000;
font-size:9pt;
font-family:arial,sans-sarif;
text-decoration:none;
}
</style>

<script language="JavaScript">

function chgtxt(a,b) {
var newtxt;
if (b=="td1"){txt2="Purchase"};
if (b=="td2"){txt2="Benefits"};
if (b=="td3"){txt2="Features"};
if (b=="td4"){txt2="Support"};
if (b=="td5"){txt2="Contact"};
if (b=="td6"){txt2="User Login"};

if (a=="1"){
newtxt = "<font size='1' color='000000'><b>" + txt2 + "</b></font>" ;
}
if (a=="0"){
newtxt = "<font size='1' color='ffffff'><b>" + txt2 + "</b></font>";
}

document.getElementById(b).innerHTML = newtxt ;

}

</script>

</head>

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<table width=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR BGCOLOR=#7190AE>
<TD id="td1" align=center WIDTH=83 HEIGHT=25 OnMouseOver="chgtxt('1','td1'); this.bgColor='#C9D5E7';" onMouseOut="chgtxt('0','td1'); this.bgColor='#7190AE';" nowrap=nowrap>
<a href=../purchase.php>Purchase</a></TD>
<TD id="td2" align=center WIDTH=83 HEIGHT=25 OnMouseOver="chgtxt('1','td2'); this.bgColor='#C9D5E7';" onMouseOut="chgtxt('0','td2'); this.bgColor='#7190AE';" nowrap=nowrap>
<a href=../purchase.php>Benefits</a></TD>
<TD id="td3" align=center WIDTH=83 HEIGHT=25 OnMouseOver="chgtxt('1','td3'); this.bgColor='#C9D5E7';" onMouseOut="chgtxt('0','td3'); this.bgColor='#7190AE';" nowrap=nowrap>
<a href=../purchase.php>Features</a></TD>
<TD id="td4" align=center WIDTH=83 HEIGHT=25 OnMouseOver="chgtxt('1','td4'); this.bgColor='#C9D5E7';" onMouseOut="chgtxt('0','td4'); this.bgColor='#7190AE';" nowrap=nowrap>
<a href=../purchase.php>Support</a></TD>
<TD id="td5" align=center WIDTH=83 HEIGHT=25 OnMouseOver="chgtxt('1','td5'); this.bgColor='#C9D5E7';" onMouseOut="chgtxt('0','td5'); this.bgColor='#7190AE';" nowrap=nowrap>
<a href=../purchase.php>Contact</a></TD>
<TD id="td6" align=center WIDTH=83 HEIGHT=25 OnMouseOver="chgtxt('1','td6'); this.bgColor='#C9D5E7';" onMouseOut="chgtxt('0','td6'); this.bgColor='#7190AE';" nowrap=nowrap>
<a href=../purchase.php>User Login</a></TD>
<TD BGCOLOR=#7190AE HEIGHT=25 width=43% nowrap=nowrap></TD>
</TR>

</TABLE>

<br>

<center>mouseover currently changes text if you mouseover the text, not on TD mouseover</center>

</body>
</html>

Tom

tripwater

02-19-2004, 02:41 PM

Thanks for the help. I seem to have found the solution to changing text and the datacell bg color onmouseover (the first one in the menu Purchase shows this).

I now however seem to have the issue of the link color screwing it up. I have a style setup in a page that I include into all of my pages which sets the a: and ahover: colors. So now in the menu items I have that actually have an href around them use the style colors.

I hope this makes sense. I want my menu to look like the first choice (Purchase) but with links but at the same time not change the link colors throughout my site because the white obviously will not show up on a white page.

THanks

tripwater

02-19-2004, 02:45 PM

I posted your code. It is not exactly what I am looking for. Thanks though.

nizex (http://www.nizex.com)

TheBearMay

02-19-2004, 02:50 PM

May want to consider giving the links in the menu bar a class name and defining a different style for them. If I may borrow a little text, it could look something like:

<style>
a.menu {
color: FFFFFF;
font-size:9pt;
font-family:arial,sans-sarif;
text-decoration:none;
}

a.menu:hover {
color: 000000;
font-size:9pt;
font-family:arial,sans-sarif;
text-decoration:none;
}
</style>
...
<a href=../purchase.php class="menu">User Login</a>
...

tripwater

02-19-2004, 02:52 PM

Thank you that does give me some ideas but is it possible for me to change the links color on the mouseover of the TD? so they change at the same time?

I have it working for text but not with href

Thanks again

TheBearMay

02-19-2004, 03:10 PM

Actually the style above is attached to the anchor element and should change the anchor text and background. If you wanted to change all other links at the same time, you could probably assign them to another class and use the mouseover/mouseout events to change the attributes of the class...let me think on that a little...

BrainDonor

02-19-2004, 03:11 PM

Add the "href's" to the chgtxt function like I did with the <font> tag.

tripwater

02-19-2004, 03:17 PM

I am confused TheBearMay.

nizex (http://www.nizex.com)

I have added your style code to my page but it only changes the text if you mouseover the text. THe first item in my menu does not have an href around it and works the way I would like for them all to work only with hrefs. THe rest as you can see only change when you mouseover the text.

Tom I tried your code but it did not work. THe TDs stayed the color once you moused over them and the text changed by stayed the color. I created a new file and only used your code and that was the result. So I am not using the chgtxt function as of now.

Thanks for your patience

BrainDonor

02-19-2004, 03:23 PM

Well, I gave it the old school try. I'll yield to the experts on this one.

Tom

tripwater

02-19-2004, 03:27 PM

Tom, Thank you for your help it is appreciated.

//*****************************************

I am confused TheBearMay.

nizex (http://www.nizex.com)

I have added your style code to my page but it only changes the text if you mouseover the text. THe first item in my menu does not have an href around it and works the way I would like for them all to work only with hrefs. THe rest as you can see only change when you mouseover the text.

tripwater

02-19-2004, 03:34 PM

Here's my code:

<HTML>
<HEAD>
<TITLE>header</TITLE>

<style>

a.menu {
color: #FFFFFF;
font-size:9pt;
font-family:arial,sans-sarif;
text-decoration:none;
}

a.menu:hover {
color: #e3593b;
font-size:9pt;
font-family:arial,sans-sarif;
text-decoration:none;
}

span {color:#FFFFFF; font-size:9pt; text-align:left;
font-family:arial, sans-serif; font-weight: bold;}

TD {font-size:10pt; font-family:arial,sans-serif; color:FFFFFF; font-weight: bold;}

</style>

<script LANGUAGE="JavaScript">
function cellChange(cell,value)
{
if (value==1)
{
cell.style.cssText = 'background-color: #C9D5E7; color: e3593b';

document.test.style.color=green;
}
if (value==2)
{
cell.style.cssText = 'background-color: #7190AE; color: #FFFFFF';

document.test.style.color=yellow;
}
}
</script>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=4 BGCOLOR=#FFFFFF>
<IMG SRC="../images/spacer.gif" WIDTH=120 HEIGHT=53 ALT=""></TD>
<TD COLSPAN=5 ROWSPAN=2>
<A HREF="../index.html">
<IMG SRC="../images/logo.gif" WIDTH=321 HEIGHT=78 BORDER=0 ALT="Home"></A></TD>
<TD rowspan=2 BGCOLOR=#FFFFFF width=100%>
<IMG SRC="../images/spacer.gif" WIDTH=359 HEIGHT=78 ALT=""></TD>
</TR>
<TR>
<TD align=right>
<IMG SRC="../images/left_tab.gif" WIDTH=27 HEIGHT=25 ALT=""></TD>

<TD background="../images/tab_filler.gif" HEIGHT=25 align=center>
<span>Home</span>
</TD>
<TD>
<IMG SRC="../images/right_tab.gif" WIDTH=29 HEIGHT=25 ALT=""></TD>
</TR>
</table>

<table width=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR BGCOLOR=#7190AE>
<TD WIDTH=125 HEIGHT=25><IMG SRC="../images/spacer.gif" WIDTH=125 HEIGHT=25 ALT=""></TD>
<TD align=center WIDTH=83 HEIGHT=25 onMouseOver="cellChange(this,1)" onMouseOut="cellChange(this,2)" nowrap=nowrap>
Purchase</TD>
<TD align=center WIDTH=83 HEIGHT=25 onMouseOver="cellChange(this,1)" onMouseOut="cellChange(this,2)" nowrap=nowrap>
<a href=../purchase.php class="menu">Benefits</a></TD>
<TD align=center WIDTH=83 HEIGHT=25 onMouseOver="cellChange(this,1)" onMouseOut="cellChange(this,2)" nowrap=nowrap>
<a href=../purchase.php class="menu">Features</a></TD>
<TD align=center WIDTH=83 HEIGHT=25 onMouseOver="cellChange(this,1)" onMouseOut="cellChange(this,2)" nowrap=nowrap>
<a href=../purchase.php class="menu">Support</a></TD>
<TD align=center WIDTH=83 HEIGHT=25 onMouseOver="cellChange(this,1)" onMouseOut="cellChange(this,2)" nowrap=nowrap>
<a href=../purchase.php class="menu">Contact</a></TD>
<TD align=center WIDTH=83 HEIGHT=25 onMouseOver="cellChange(this,1)" onMouseOut="cellChange(this,2)" nowrap=nowrap>
<a href=../purchase.php class="menu">User Login</a></TD>
<TD BGCOLOR=#7190AE HEIGHT=25 width=43% nowrap=nowrap></TD>
</TR>

</TABLE>

</BODY>
</HTML>

tripwater

02-19-2004, 04:05 PM

Nizex.com (http://www.nizex.com)

tripwater

02-20-2004, 07:35 AM

BUMP

tripwater

02-20-2004, 10:11 AM

Nevermind I'll use images

Paul Jr

02-20-2004, 12:13 PM

If you want to change the background color of a tabel cell, along with the color of the text within onmouseover, you would do something like this:

<table border="1" cellpadding="5" cellspacing="3">
<tr>
<td onmouseover="this.style.backgroundColor='#000'; this.style.color='#F00';" onmouseout="this.style.backgroundColor='#FFF'; this.style.color='#000';">Link 1</td>
<td>Link 2</td>
</tr>
</table>

fredmv

02-21-2004, 02:52 AM

Just to note, JavaScript is not needed and this is possible by the means of pure CSS.

Paul Jr

02-21-2004, 10:58 AM

Originally posted by fredmv
Just to note, JavaScript is not needed and this is possible by the means of pure CSS.
True true. ;)

I also just thought, if one was to use JS, it would be even shorter just to change the class.