Text Highlighting

Radon3k

I want to highlight not necessarily the cells but the words when you mouseover them. Here's an example of what I'm talking about: http://www.interscapeusa.com on the right hand side when you mouseover it highlights blue. That's what I want done. Anybody know how? Thanks. 🙂

stolzyboy

this should get you going (this is how they did it if you would have viewed the source, but there are easier ways), of course you will use different colors, i just wanted to make it obvious of the change

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<style type="text/css">
.Menu {
	background-color : #00ccff;
}
.MenuHover {
	background-color : #ffff00;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="120">
<tr>
<td valign="top">
<div class="Menu" onMouseOver="this.className = 'MenuHover';" onMouseOut="this.className = 'Menu';"><a href="http://www.yahoo.com">Yahoo</a></div>
<div class="Menu" onMouseOver="this.className = 'MenuHover';" onMouseOut="this.className = 'Menu';"><a href="http://www.google.com">Google</a></div>
</td>
</tr>
</table>
</body>
</html>

epimeth

put the text in a span.... <span onmouseover="this.style.color = blue;">TEXT GOES HERE</span>

goldbug

Well, looking at the source for that page reveals that its simply some javascript rollover effects. There's an onmouseover="" in the div tag that changes the CSS class of the div.

Imho, a more elegant solution would be simply to create a CSS hover pseudoclass for the div. For example (CSS):

div.menu
{
  color: #FFFFFF;
  background-color: #000000;
}
div.menu:hover
{
  color: #FFFFFF;
  background-color: #666666;
}

Of course, this will only work in a good CSS-supporting browser like Mozilla/Firebird. IE is so sucky and outdated, that it only does the :hover pseudoclass for anchors.

Radon3k

Unfortunately it didn't work. I even copied and pasted what stolzyboy posted.

goldbug

Stolzy's code works fine for me. Tested in Mozilla 1.4, IE6, Opera 7--all functioned.

Radon3k

http://www.currentpolitics.com/test.html is the link and as you can see, it's not working even though I've copied and pasted the code and changed the colors.

stolzyboy

if you use what i took from the other site, you need to cutnpaste the styles into your .css file you have or put what i have in the head of your document

Radon3k

Normally I rag on people for being stupid, really stupid. Like.. when it's a clear day and they look up and say, "Hy, the sky is blue!". Well I think I deserve to be ragged on. Of course it works, but it may have helped if I had uploaded the new .css file. 😃 Thanks for the help. 🙂 Is there a way I can make the highlighted portion go all the way across the cell?

goldbug

You're going to need to either remove the padding on the table cells, or use negative margins. The former is more likely to work in most browsers, but the latter doesn't mod your current padding.

ex: in the div: style="margin-right -25px;"

An easy solution, however, is to put your padding in the menu item divs, instead of the table cell.