asked on

onMouseover=(CSS Class)?

any possibility of making a Mouseover within a <TD> tag styled by a CSS class?

i.e., <TD class="styleA" onMouseover="blah='styleB'" onMouseout="blah='styleA'">BLAH</TD>

Any help will be hugely appreciated... Thanks, TW

ChimpyLoLo

ASKER

I know its a newbie question but no one's got an answer for me?

Fendrin

yes it can be done, though not quite like that... as for why noone has answered you, this isn't a paid-tech support service... we 'experts' are people who donate our time and effort to helping others... so there isn;t always someone immediately around... that and we don;t get notified when a question comes in, so some time might go by...

here is what you do (if I am understanding your question correctly)

in your css, you do the following:

a.linkstyle { /*link style goes here*/}
a.linkstyle:hover { /*mouseover style goes here*/}

ASKER CERTIFIED SOLUTION

dorward

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

rightho

You can do something like this. I got this code off the internet sometime ago.

<html>
<style type="text/css"> td.onmouse { background-color: #000000; color: #FFFFFF; } td.offmouse { background-color: #FFFFFF; color: #000000; } </style>
</style>
<body>
<table>
<td class="menuoff" onmouseover="className='onmouse';" onmouseout="className='offmouse';">Text that will be changed</td>
</table>
</body>
</html>

Daydreams

Try this:

<html>
<head>
<title>Changing cell onmouseover</title>
<style>

</style>
</head><body>
A colorful example of onmouseover effect, javascript and css: (hover mouse on cell)
<table style="border:1pt blue solid;background-color:lightblue;">
<tr><td class="limegreen"
onMouseover="this.className='green';"
onMouseout="this.className='limegreen';">
this is a cell
</td></tr><tr>
<td class="limegreen"
onMouseover="this.className='red';"
onMouseout="this.className='limegreen';">
this is a cell
</td></tr>
</table>
</body>
</html>

Daydreams

Just noticed my comment is an expansion on dorwards answer.. I just added more style for the example.

bruno

dorward has provided you with the correct answer here, is there a reason you haven't closed out this question yet?

ren_b

this works plenty well in mozilla and the likes:

<html>
<head>
<title>hover selector</title>
<style type="text/css">

box {
padding: 3em;
margin: 1em;
border: 4px solid #000;
background: #ff0;
color: #060;
}

box:hover {
border: 4px dashed #060;
background: #000;
color: #f0f;
}

</style>
</head>
<body>

<div id="box"> blah blah blah </div>

</body>
</html>

ren_b

#box and #box:hover, oops

IZING

yes it is possible, and very simple

create a file called root.js and put this code in it:

       function MouseEffect( event )
       {      switch( event.type )
             {      case "mouseover":
                        if( document.all )
                        {       window.event.srcElement.style.backgroundColor = '#840029';
      window.event.srcElement.style.color = '#ffffff';
                        }else{
                              event.currentTarget.style.backgroundColor = '#840029';
      event.currentTarget.style.color = '#ffffff';
                        }
                        break;
                  case "mouseout":
                        if( document.all )
                        {      window.event.srcElement.style.backgroundColor = '#948463';
      window.event.srcElement.style.color = '#ffffff';
                        }else{
                              event.currentTarget.style.BackgroundColor = '#948463';
      event.currentTarget.style.color = '#ffffff';
                        }
                        break;
                  default:break;
            }
       }

basically this code work with both Netscape and IE.

Now in your html file, you should make a reference to the root.js file like this:
<script language="JavaScript" src="lib/root.js"></script>

then in your body, on the cell that you want to change the color you do this
<td align=center class=greyTd onmouseover="MouseEffect(event);" onMouseOut="MouseEffect(event);" onClick="ChangePage('Aboutus.htm');">About me</td>

greyTd is just my css.

This will work for you. To see this page in effect check this link
http://www.jk2design.com/Gallery.htm

regards,

iz.

momoaal

thanks Daydreams ;)