lneisius
|
| Posted: 07/09/2003, 8:39 AM |
|
Can a css be modified to use mouse events? What I am trying to do is change the color of a table row as a mouse hovers the row and change the color from the base color if the row is selected. I have a javascript function (provided by Bart Verstricht of www.dbweaver.com) to do this but if using css within the table the function does not work.
CCS has the on mouse events in the properties pane but will not work as is maybe with something added?
|
|
|
 |
Anand
|
| Posted: 10/16/2003, 12:48 PM |
|
Ineisius,
Did you found a solution within CSS? I am facing the same problem using the the mouseover event.
regards, Anand
|
|
|
|
lneisius
|
| Posted: 10/16/2003, 2:07 PM |
|
Yes I did!!!
Here is the javascript function I created to do just that!
//Pointer Function to Change TableRow Class On Mouse Events
function Pointer(field, action, defaultClass, pointerClass, markClass) {
var newClass
var currentClass
currentClass=field.className;
if (action == 'over' && currentClass == defaultClass) {
newClass=pointerClass; }
if (action == 'out' && currentClass == pointerClass) {
newClass=defaultClass; }
if (action == 'click' && currentClass == defaultClass) {
newClass=markClass; }
if (action == 'click' && currentClass == pointerClass) {
newClass=markClass; }
if (action == 'click' && currentClass == markClass) {
newClass=pointerClass; }
if (newClass) {
field.className=newClass; }
}
//End function Pointer()
Here is the way to place it in the html:
<tr class="{Theme}DataTR" onmousedown="Pointer(this, 'click','{Theme}DataTR', '{Theme}DataTrMouseOver', '{Theme}DataTrMouseDown')" onmouseout="Pointer(this, 'out','{Theme}DataTR', '{Theme}DataTrMouseOver', '{Theme}DataTrMouseDown')" onmouseover="Pointer(this, 'over', '{Theme}DataTR', '{Theme}DataTrMouseOver', '{Theme}DataTrMouseDown')">
Here is how I modified the CSS file (Used Sulfur for theme here):
.SulfurDataTR{ }
.SulfurDataTRMouseOver{ font-weight:bold; font-size: 9px;}
.SulfurDataTRMouseDown{ font-weight:bold; font-size: 9px; font-style:italic}
.SulfurDataTD{ border-style: outset; border-width: 1px; background-color: #FFFFFF; font-size: 13px; }
.SulfurAltDataTR{ }
.SulfurAltDataTRMouseOver{ font-weight:bold; font-size: 9px;}
.SulfurAltDataTRMouseDown{ font-weight:bold; font-size: 9px; font-style:italic}
.SulfurAltDataTD{ border-style: outset; border-width: 1px; background-color: #E7DBBC; font-size: 13px; }
Note: playing with it you can modify the colors to change or the text or any property you want!!!!!!
If you have any problems or suggestions let me know and I will try to help.
|
|
|
|
|
