Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change background colour on mouse over 1

Status
Not open for further replies.
jaredc

jaredc

Programmer
Jun 28, 2002
43
GB
Hi

I have a number of links contained within the TD element of a TABLE. I'm using CSS to make the text link change color on mouseover. What I'm wondering is whether I can make the background colour of the whole TD cell change colour on a mouse rollover rather than just the background colour behind the text itself. I would like to keep the text hyperlink (rather than use images as links). The code I've got so far is as follows:
Code: 
<STYLE>
a.MainLink 
{
color: #666666;
font-family: Arial;
font-size: 9pt;
text-decoration: underline;
background-color: #CC9933;
}

a.MainLink:hover
{
color: #999999;
font-family: Arial;
font-size: 9pt;
text-decoration: none;
background-color: #FFCC66;
}

</STYLE>
<BODY>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0>
	<TR>
		<TD WIDTH=20% BGCOLOR=#CC9933 ALIGN=CENTER>
		</TD>
		<TD WIDTH=10% ALIGN=CENTER BGCOLOR=#CC9933>
		<A HREF=&quot;&quot; CLASS=&quot;MainLink&quot;>Home</A>
		</TD>
		<TD WIDTH=70% BGCOLOR=#CC9933 ALIGN=CENTER>
		</TD>
	</TR>
</TABLE>
Hope this makes sense and any advice or help would be very much appreciated
Mike
 
Sort by date Sort by votes
Code: 
...
<SCRIPT LANGUAGE=&quot;JAVASCRIPT&quot;>
function back(id, colour)
{
  if(document.all)
    var prefix=document.all[id].style;
  else
    var prefix=document.layers[id];

  prefix.background=colour; 
}
</SCRIPT>
</HEAD>

<BODY>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0>
<TR>
  <TD WIDTH=20% BGCOLOR=#CC9933 ALIGN=CENTER></TD>
  <TD WIDTH=10% ALIGN=CENTER BGCOLOR=#CC9933 ID=cell1><A HREF=&quot;&quot; CLASS=&quot;MainLink&quot; onMouseOver=&quot;back('cell1','#FFFFFF');&quot; onMouseOut=&quot;back('cell1','#CC9933')&quot;>Home</A></TD>
  <TD WIDTH=70% BGCOLOR=#CC9933 ALIGN=CENTER></TD>
</TR>
</TABLE>
...
Tony
reddot.gif WIDTH=500 HEIGHT=2 VSPACE=3

 
Upvote 0 Downvote
Thanks very much Tony, that was exactly what I was after! Javascript to the rescue!

Cheers
Mike
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
693
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
764
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
703
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
883
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top