PDA

View Full Version : mouseover font color



Chadi
03-14-2006, 12:23 AM
How do I add font color change on mouse over on a cell while I already have default mouse over font color change page wide?



<tr>
<td style="background-color:#F8F8F8;text-align:center; padding-left:10px" onmouseover="this.style.backgroundColor='#FF9900';this.style.borderColor='#FFFFFF';" onmouseout="this.style.backgroundColor='#F8F8F8';this.style.borderColor='#ffffff';" height="20">
<p style="text-align: left"><font face="Arial" style="font-size: 8pt; font-weight: 700" color="#FF9900"> </font>
<font face="Arial" style="font-size: 8pt; font-weight: 700">
<a style="text-decoration: none" href="network.htm">Data Center &amp;
Network</a></font></td>
</tr>


The page style is:



<style type="text/css">
a:link {
color:#2E304E;
}
a:visited {
color:#2E304E;
}
a:hover {
color:#FF9900;
}
</style>

jscheuer1
03-14-2006, 05:38 AM
td a:hover {
color:whatever;
}

mwinter
03-14-2006, 12:21 PM
How do I add font color change on mouse over on a cell while I already have default mouse over font color change page wide?John answered that, but I think your markup should be commented on.


<td style="background-color:#F8F8F8;text-align:center; padding-left:10px"Avoid in-line style declarations whenever possible. Presentation should be separated from content: use an external style sheet.


onmouseover="this.style.backgroundColor='#FF9900';this.style.borderColor='#FFFFFF';" onmouseout="this.style.backgroundColor='#F8F8F8';this.style.borderColor='#ffffff';"Consider using functions to perform these actions, and perhaps using a change in class attribute to effect them. Both changes leave the markup a little clearer, and allow easier maintanence in the future.


<font face="Arial" style="font-size: 8pt; font-weight: 700" color="#FF9900"> </font>Don't ever use the font element. Ever! Moreover, don't use points (pt) or pixels (px) to set text size. Use percentages, leaving body text at 100%.

If necessary, you could mark-up the above using a span element:



<span class="bullet"></span> <a href="...">...</a>
however, if my guess is correct and this is part of a list, then the table should be replaced by an unordered list (ul element).


a:link {
color:#2E304E;
}A color declaration should be accompanied by an explicit background declaration.

Mike

Chadi
03-14-2006, 04:55 PM
Thanks, using the original code I provided how would I also make the entire cell hyperlinked as the text within it, on mouseover?

jscheuer1
03-14-2006, 05:05 PM
td a:link {
display:block;
width:100%;
height:100%;
}

I didn't double check but, as long as the link is the only thing in the table cell, that will do it.

Chadi
03-14-2006, 05:12 PM
Sorry but how would I implement this exactly?

This is one cell for example



<td style="background-color:#F8F8F8;text-align:center; padding-left:10px" onmouseover="this.style.backgroundColor='#EAEAEA';this.style.borderColor='#FFFFFF';" onmouseout="this.style.backgroundColor='#F8F8F8';this.style.borderColor='#ffffff';" height="20">
<p style="text-align: left">
<font face="Arial" style="font-size: 8pt; font-weight: 700" color="#FF9900">
<img border="0" src="images/menuorange.gif"> </font><span style="font-weight: 700"><a href="http://webdomain.com/colocation.htm"><font face="Arial" style="font-size: 8pt; text-decoration: none">
Colocation</font></a></span></td>

jscheuer1
03-14-2006, 05:23 PM
That really is, as Mike pointed out, a mess (see his comments for cleaning it up). However, it really doesn't present any roadblock I can see to using this in the head of your page:


<style type="text/css">
td a:link {
display:block;
width:100%;
height:100%;
}
td a:hover {
color:yellow;
background-color:black;
}
</style>