In my page I have the cell backgorund color change when the cell is moused over. I would also like the font color to change to white (#FFFFFF) when the cell is moused over as well, but I don't know how. I know how to make the text change when the text is hovered, but I want the text to change when the entire cell is hovered, if possible. Here is the code for a sample cell:
Regards!
Alon C.
___________________________________________ If a packet hits a pocket on a socket on a port,
and the bus is interrupted at a very last resort,
and the access of the memory makes your floppy disk abort,
then the socket packet pocket has an error to report.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
—Tim Berners-Lee, W3C Director and inventor of the World Wide Web
The HTML 4.01 Specification has this to say about tables:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
—Tim Berners-Lee, W3C Director and inventor of the World Wide Web
the problem was that you were using HTML font tag to set the font color but using CSS/DOM to change the "color" property of the cell, which wouldn't work. Instead, remove the font tag's color property and move the color into the style property of the table cell. Then modify that property dynamically on mouseover and mouseout.
In my page I have the cell backgorund color change when the cell is moused over. I would also like the font color to change to white (#FFFFFF) when the cell is moused over as well, but I don't know how. I know how to make the text change when the text is hovered, but I want the text to change when the entire cell is hovered, if possible. Here is the code for a sample cell:
Jeffy, I have a simple test page that may help or not, but I post it here for your use.
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Table Row Rollover Demo</title>
<style type="text/css">
table{ width: 98%; border: 1px solid blue; }
td{ border: 1px solid #DDD; }
.whi { background: #FFF; cursor: default }
.red { background: #F00; cursor: hand; }
</style>
<script>
function f(o,b){ o.className = (b) ? 'red' : 'whi'; } // event handler
function init(){//dynamic event handler assignment
var obj = null;
for(i=0;i<3;i++){ // 0..maxTableRows
obj = document.getElementById("r"+i); // find the IDs of the table...
obj.onmouseover = function(){f(this,1);} // assign a onmouseover event handler to each row
obj.onmouseout = function(){f(this,0);} // assign a onmouseout event handler to each row
}
}
</script>
</head>
<body onLoad="init();">
<div align="center"><h2>All three tables do the same thing, only in slightly different ways.</h2></div>
<!-- While this table seems simple, it is hardest to maintain as color class is imbedded in the table, as is the event handler assignment -->
<table align="center">
<caption>This table uses a <strong>statically</strong> assigned event handler to assign the css class</caption>
<tr onmouseover="this.className='red';" onmouseout="this.className='whi';">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmouseover="this.className='red';" onmouseout="this.className='whi';">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onmouseover="this.className='red';" onmouseout="this.className='whi';">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<br>
<!-- This table is slightly easier to maintain, as no color class is imbedded in the table, but the event handler assignment is imbedded -->
<table align="center">
<caption>This table uses a <strong>statically</strong> assigned javascript event handler function to assign the css class</caption>
<tr onMouseOver="f(this,1);" onMouseOut="f(this,0);">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onMouseOver="f(this,1);" onMouseOut="f(this,0);">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onMouseOver="f(this,1);" onMouseOut="f(this,0);">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<br>
<br>
<!-- This table is the easiest to maintain as no color class is imbedded, and the event handlers can be changed externally. -->
<table align="center">
<caption>This table uses a <strong>dynamically</strong> assigned javascript event handler function to assign the css class</caption>
<tr id="r0">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="r1">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="r2">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<br>
<br>
</body>
</html>
While it does not specifically address your problem, it does address onmouseover, and onmouseout events.
"It's a small world, but I still wouldn't want to paint it."
---Steven Wright
thanks -asx-: your code works exactly how I wanted it to in order to paste codes inline, you need to use the forum tags. it's like html tags except you use squre brackets. so put your code between <php>your code here</php> except chage the brackets to square ones.
OK, let me try that. Here's an improved version of that script that will allow the entire cell to be a hyperlink instead of just the word "Home". This way you don't have the problem where the whole cell responds to mouseover, but only the actual text is clickable, which would annoy users. This also uses window.status onmouseover and onmouseout to simulate an actual HTML link:
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
—Tim Berners-Lee, W3C Director and inventor of the World Wide Web
Reply With Quote
Originally Posted by jeffy777
in order to paste codes inline, you need to use the forum tags. it's like html tags except you use squre brackets. so put your code between <php>your code here</php> except chage the brackets to square ones.
Change font color on mouse over on CSS
Bookmarks