PDA

View Full Version : Html Table help

dryst
08-15-2003, 03:30 AM
i have a html coding for a table and i was trying to figure out how to get the cell back ground color and text color to change a different color when a person moves the mouse over it
agent002
08-15-2003, 04:50 AM
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/javascript"><!--

// Hover color
var hovercolor="red";

function MouseOverTable(what){
what.style.backgroundColor=hovercolor;
}
function MouseOutTable(what){
what.style.backgroundColor='';
}

//--></script></head>
<body>
...
<table>
<tr>
<td onmouseover="MouseOverTable(this);" onmouseout="MouseOutTable(this);">...</td>
</tr>
</table>
...
</body>
</html>
dryst
08-15-2003, 06:38 AM
gwaa....ummm....rrright....except i have no exp. in java
so i got no idea what that hover sh...stuff is :confused:
dryst
08-15-2003, 06:43 AM
<body text=#ffffff vlink=#ffffff alink=#ffffff link=#ffffff bgcolor=#ffffff topmargin=0>


<table cellspacing=0 cellpadding=0 width="10%" border="3">
<tr>
<td align="middle" valign=top bgcolor=#000000><br><table cellspacing=0 cellpadding=0 border=0>
<tr>
<td align="middle" onmouseover="style.backgroundColor='#d3d3d3'; style.cursor='hand'" onmouseout="style.backgroundColor='#000000';">
<b>Nav Bar</b></td>
</tr>

<tr>
<td align="middle" onmouseover="style.backgroundColor='#d3d3d3'; style.cursor='hand'" onmouseout="style.backgroundColor='#000000';">
<a class=nav href=""><div>Test A1</div></a></td>
</tr>

<tr>
<td align="middle" onmouseover="style.backgroundColor='#d3d3d3'; style.cursor='hand'" onmouseout="style.backgroundColor='#000000';">
<a class=nav href=""><div>Test A2</div></a></td>
</tr>

<tr>
<td align="middle" onmouseover="style.backgroundColor='#d3d3d3'; style.cursor='hand'" onmouseout="style.backgroundColor='#000000';">
<a class=nav href=""><div>Test A3</div></a></td>
</tr>

<tr>
<td align="middle" onmouseover="style.backgroundColor='#d3d3d3'; style.cursor='hand'" onmouseout="style.backgroundColor='#000000';">
<a class=nav href=""><div>Test A4</div></a></td>
</tr>

<tr>
<td align="middle" onmouseover="style.backgroundColor='#d3d3d3'; style.cursor='hand'" onmouseout="style.backgroundColor='#000000';">
<a class=nav href=""><div>Test A5</div></a></td>
</tr>

<tr>
<td align="middle" onmouseover="style.backgroundColor='#d3d3d3'; style.cursor='hand'" onmouseout="style.backgroundColor='#000000';">
<a class=nav href=""><div>Test B1</div></a></td>
</tr>

<tr>
<td align="middle" onmouseover="style.backgroundColor='#d3d3d3'; style.cursor='hand'" onmouseout="style.backgroundColor='#000000';">
<a class=nav href=""><div>Test B2</div></a></td>
</tr>

<tr>
<td></td>
</table>
</html>

this is what i got....simple html..except i want the text to turn black when i put my mopuse over it and i want the highlighted area to be in a border like in this table

<html>
<heading>
</heading>
<body TEXT="#000000" LINK="#ffffff" VLINK="#ffffff" bgcolor="#ffffff">

<table bgcolor="#ffffff" width="15%" border="3" bordercolor="#000000">
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b><u>Nav Bar</u></b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b>A1</b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b>A2</b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b>A3</b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b>A4</b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b>A5</b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b>A6</b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b><u>B1</u></b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b>B2</b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b>B3</b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b>B4</b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b>B5</b></font></td></tr>
<Tr><td align="middle" bgcolor="#d3d3d3"><font size="2"><b>B6</b></font></td></tr>
</table>


like this except that the grey cell bg colors would highlight to a different color and the text would change as well