table cell highlight and text change on mouseover

EscapeCharacter · 09-04-2003, 05:52 PM

ive been working on this and i cant seem to find a want to get the hyperlink text in the cell to change. ive tried document.getElementById('tagname').style.foregroun dColor but that doesnt work nor does .color. has anyone ever done this? ive got the cell to change color using the following

Code:

function switchTab1(t){
	if(document.getElementById){
		document.getElementById(t).style.backgroundColor = "#000000";
		document.getElementById('tab2').style.backgroundColor = "#ffffff";
		document.getElementById(t).style.color = "#ffffff";
	}
	else if(document.layers){
		document[t].bgColor = "#000000";
		document['tab2'].bgColor = "#ffffff";
	}
	else if(document.all){
		document.all[t].style.backgroundColor = "#000000";
		document.all['tab2'].style.backgroundColor = "#ffffff";
	}
}

but i cant figure out how to change the font color when the mouse is over the cell and not just over the text itself.

EscapeCharacter · 09-04-2003, 06:38 PM

if anyone care i decided to just remove the anchor tag and added an onclick function to my cell and everything worked out fine.

bdl · 09-04-2003, 07:10 PM

I'm not great with JS, but this is how I've done the hover-cell-change-color deal:

Code:

<html>
<head>
 <style type="text/css">
   .onhover {
      background: #000;
      color: #FFF;
   }

   .nohover {
      background: #FFF;
      color: #000;
   }
 </style>
</head>
<body>
<table>
 <tr>
  <td onmouseover="this.className='onhover';" onmouseout="this.className='nohover';">
  This text will change color.
  </td>
 </tr>
</table>
</body>
</html>

You can view the result <here>.
Not quite sure if this is what you're looking for, but it's about as simple as you're gonna get. =)

EscapeCharacter · 09-04-2003, 07:20 PM

interesting, i never thought of using css for this. is it completely browser indepedent?

bdl · 09-04-2003, 08:23 PM

Good question. I've tested it in IE 6 and Mozilla / Firebird. AFAIK it would work in any CSS compliant browser.

EscapeCharacter · 09-04-2003, 08:30 PM

cool ill have to try that, itll let me eliminate 2 javascript functions

EscapeCharacter · 09-06-2003, 06:26 AM

i just found another even easier way to do this and the mouse even changes to what it looks like over a link.

Code:

.tablink:visited{color: black; text-decoration: none;}
.tablink:active{color: black;}
.tablink:link{color: black; text-decoration: none;}
.tablink:hover{text-decoration: none;color: white;background-color: #7A8AFF;}
.tablink{
	align: center;
	display: block;
	width: 100%;
}

all of that isnt really need but it does the job. the part that makes the whole cell a link is width and the display. then all you need to do in the link is add the class

Code:

<a class="tablink" href="">Link</a>

no pesky javascript to worry about css rules

bdl · 09-07-2003, 01:31 PM

I had forgotten about this method I used once upon a time, works the same, less typing:

Code:

<td onMouseOver="this.bgColor='#D3D3D3'"; onMouseOut="this.bgColor='#FFFFFF'";>

sde · 09-08-2003, 07:46 AM

hehe .. you could always view source here: http://codenewbie.com/tutorials.php

EscapeCharacter · 09-08-2003, 08:39 PM

Quote:

Originally posted by sde
hehe .. you could always view source here: http://codenewbie.com/tutorials.php

that would work out fine except for the fact that im making the site for people that arent really computer literate and i wanted to make the entire cell look like a link(in the sense that when you mouse over it the mouse cursor changes the pointer like it would over a link)

thanks for pointing that out though that would have saved me a couple hours of googling

sde · 09-08-2003, 08:44 PM

hmmm .. that page does what you described to me?

bdl · 09-08-2003, 09:08 PM

Just make this change, it's a simple CSS trick to change the cursor to a hand over the table cell:

Code:

<td style="cursor: pointer; cursor: hand;"
 onMouseOver="this.bgColor='#D3D3D3'"  onMouseOut="this.bgColor='#FFFFFF'";>
this should change color and look like a link
</td>

You could, of course, just make it a CSS class at the head of your document, like

Code:

td.rollover { cursor: pointer; cursor: hand; }

This, is of couse, if I understand you correctly that you want to make a 'fake link' on the rollovers...

http://devedge.netscape.com/viewsource/2002/cursor/

sde · 09-08-2003, 10:13 PM

Quote:

Originally posted by EscapeCharacter
that would work out fine except for the fact that im making the site for people that arent really computer literate and i wanted to make the entire cell look like a link(in the sense that when you mouse over it the mouse cursor changes the pointer like it would over a link)

thanks for pointing that out though that would have saved me a couple hours of googling

hey .. if they aren't that computer literate, then they probably will be using MSIE .. which will make the hand show up with that code.

i just looked at it in mozilla and realized that the hand doesn't show.

EscapeCharacter · 09-09-2003, 12:28 AM

Quote:

Originally posted by sde
hey .. if they aren't that computer literate, then they probably will be using MSIE .. which will make the hand show up with that code.

i just looked at it in mozilla and realized that the hand doesn't show.

thats what kinda got this started in the first place

.