PDA

View Full Version : mouse over in table

Meths
03-03-2003, 03:50 AM
is it possible to have a colour change mouse over for cells in a table?
nickoli21
03-03-2003, 07:29 AM
Sure, what is it that you want to change the color of?

onmouseover="you command here; return true"
onmouseout="you command here;return true"

If you need me to be more specific, let me know what you need changed and if you need the color changed back onmouseout.

Nick
cg9com
03-03-2003, 07:50 PM
yes, basically use javascript event handlers until better CSS support is implemented in Internet Explorer. :rolleyes:
first set your CSS to whatever is needed

<style type="text/css">
td.menu {background-color:white;}
td.menuover {background-color:red;}
</style>

then use javascript to call each class name, along with the mouseover event handlers, and specify the default class="" like so.

<td class="menu" onmouseover="this.className='menuover';"
onmouseout="this.className='menu';">

there are easier inline ways to just set the color of text with those handlers, but i find using full css alot more handy ;)
nickoli21
03-03-2003, 09:09 PM
That would work as well. I was just using a simpler way.

:p

Nick
Meths
03-03-2003, 09:47 PM
Ok, a simplified version of what is essentially my menu (sans links atm) looks like this. Right now the background is yellow, but when I move the mouse over it how do I make it go blue?

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100" id="AutoNumber1">
<tr>
<td bgcolor="#FFFF00">Home</td>
</tr>
<tr>
<td bgcolor="#FFFF00">Contact</td>
</tr>
<tr>
<td bgcolor="#FFFF00">Gallery</td>
</tr>
<tr>
<td bgcolor="#FFFF00">Links</td>
</tr>
</table>
nickoli21
03-03-2003, 10:36 PM
Here is how I'd probably do it. (Yes....using style sheets like cg9com showed.)

You can cut and paste this to see it work if you want to see it before you put it in.


<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title> Your Page </title>
<meta name="Author" content="Your Name" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<style type="text/css">
body { background: white; color: black }
a: link { color: red }
a: visited { color: blue }
a: active { color: green }
td.menu {background-color: #ffff00 }
td.menuover {background-color: #0000ff }
</style>

</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="100" id="AutoNumber1">
<tr>
<td bgcolor="#ffff00" onmouseover="this.className='menuover'; return true"
onmouseout="this.className='menu'; return true">Home</td>
</tr>
<tr>
<td bgcolor="#ffff00" onmouseover="this.className='menuover'; return true"
onmouseout="this.className='menu'; return true">Contact</td>
</tr>
<tr>
<td bgcolor="#ffff00" onmouseover="this.className='menuover'; return true"
onmouseout="this.className='menu'; return true">Gallery</td>
</tr>
<tr>
<td bgcolor="#ffff00" onmouseover="this.className='menuover'; return true"
onmouseout="this.className='menu'; return true">Links</td>
</tr>
</table>


</body>
</html>


Anything else, let us know. :D

Nick
cg9com
03-03-2003, 11:07 PM
Meths make sure you use CSS, and add those javascript handlers.
nickoli21
03-03-2003, 11:17 PM
cg9com,

Would you have done something different? I am always open to learning new things.

Nick
cg9com
03-03-2003, 11:25 PM
i think we have covered the best way, that is until IE will support the :hover pseudoclass for most all elements, in which case you could just use CSS.
Meths
03-04-2003, 01:43 AM
Bingo. Thanks to everybody.
Meths
03-04-2003, 01:53 AM
Is it possible to have two different for the origianl menu cells (say the top two cells are still yellow but the bottom two cells become red) but have them all mouse over as blue?
nickoli21
03-04-2003, 06:46 PM
In the code above, all you would have do is change the original color and add a new style with the color that you want those cells to be.

Nick