placing javascript within style sheets??

[jhherring]

I've got a fairly lengthy set of onmouseover and onmouseout and onclick JavaScript statements occurring, over and over again, within a bunch of table cells. It would be unbelievably cool if there was a way to move all the JavaScript out to a style sheet. Is there a way to do that? If I could somehow specify that with a class applied, all the JavaScript for that class would apply . . . .

Here's an example from the current project:

=======================================================
<td class=&quot;button&quot;

onmouseover=&quot;style.backgroundColor='#9ac';
style.color='black';status='Home Page';
style.border='1px solid';style.borderColor='#000 #ccc #ccc #000';&quot;

onmouseout=&quot;style.backgroundColor='#336';
style.color='#ccc';status='';
style.border='1px solid';style.borderColor='#ccc #000 #000 #ccc';&quot;

onclick=&quot;location.href='index.html';&quot;>

Home Page</td>
=======================================================

What would be wonderful is to be able to reduce it to:

<td class=&quot;button&quot;>Home Page</td>

Any chance this is possible?

Thanks for any help you can offer.

John Herring
jhherring@yahoo.com

 

[RISTMO]

Why don't you make it a JavaScript function? It wouldn't be quite as small, but it would work.
<script>
<!--
function on_over(){
style.backgroundColor='#9ac';
style.color='black';status='Home Page';
style.border='1px solid';style.borderColor='#000 #ccc #ccc #000';
}

function on_out(){
style.backgroundColor='#336';
style.color='#ccc';status='';
style.border='1px solid';style.borderColor='#ccc #000 #000 #ccc';
}
function on_click(where){
location.href=where;
}
//-->
</script>

<td class=&quot;button&quot; onmouseover=&quot;on_over()&quot; onmouseout=&quot;on_out()&quot; onclick=&quot;on_click(&quot;index.html&quot;&quot;>

Rick if(($question==&quot;has been bugging me&quot;
AND $answer==&quot;fixed the problem&quot OR $answer==&quot;really good post&quot{
print(&quot;Star&quot;
}else{
print(&quot;Thanks.&quot;
}

 

[jhherring]

Well . . . first, thanks for your reply. I have no doubt it will work, and I'll probably try it out at least as an exercise. I agree that it's more compact, and compactness was definitely what I was going for, so (since there doesn't seem to be a whole lot of alternative) I guess I'll do this. I hope I don't seem ungrateful, it's just that I had hoped/imagined it could be done even more compactly. Sometimes there just isn't a way.

Thanks for your efforts.


John Herring
jhherring@yahoo.com

 

[Tarwn]

Why are you not using hrefs?
Just define a CSS class to make the href look like a button and then define the classname:hover attribute so that you will have it change onHover(onMouseover)

<style>
myButton{
   background-color: #336;
   color: #ccc;
   border: 1px solid;
   border-color: #ccc #000 #000 #ccc;
   text-decoration: none; /*get rid of underline*/
}
myButton:hover{
   background-color: #9ac;
   color: black;
   border: 1px solid;
   border-color: #000 #ccc #ccc #000;
   text-decoration: none; /*get rid of underline*/
}
</style>

then your button:
<td>
   <a href=&quot;wherever.htm&quot; class=&quot;myButton&quot;>Home</a>
</td>

-Tarwn ------------ My Little Dictionary ---------
Reverse Engineering - The expensive solution to not paying for proper documentation

 

[jhherring]

Well, thanks to everyone's help, I've kind of gotten back where I started. I guess I should have mentioned from the start that I want the ENTIRE table cell to be highlighted whenever the user hovers over any part of the cell, not just the words between the <a> tags.

Strangely, this is exactly what happens using the code below, but ONLY FOR THE FIRST CELL! All the other cells act differently! Just copy and paste this, without changing anything at all, and mouse over any part of the first cell. It highlights, right? Now mouse over the other cells -- if your cursor is anywhere other than the words -- no highlight!

Very frustrating! Still, I'm grateful for any help anyone can suggest.

John Herring
jhherring@yahoo.com



<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>

<html>
<head>

<title>Untitled</title>

<style>

.myButton{
display:block;
font-size:12px;font-family:arial;font-weight:bold;
background-color: #336;
color: #ccc;
border: 1px solid;
border-color: #ccc #000 #000 #ccc;
text-decoration: none;
padding:2px 16px;
text-transform:uppercase;
}

.myButton:hover{
display:block;
font-size:12px;font-family:arial;font-weight:bold;
background-color: #9ac;
color: #000;
border: 1px solid;
border-color: #000 #ccc #ccc #000;
text-decoration: none;
padding:2px 16px;
text-transform:uppercase;
}

</style>

</head>

<body bgcolor=#aaaaaa>

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>

<td><a href=&quot;wherever.htm&quot; class=&quot;myButton&quot;>Home page</a></td>
<td><a href=&quot;wherever.htm&quot; class=&quot;myButton&quot;>Home page</a></td>
<td><a href=&quot;wherever.htm&quot; class=&quot;myButton&quot;>Home page</a></td>
<td><a href=&quot;wherever.htm&quot; class=&quot;myButton&quot;>Home page</a></td>
<td><a href=&quot;wherever.htm&quot; class=&quot;myButton&quot;>Home page</a></td>
<td><a href=&quot;wherever.htm&quot; class=&quot;myButton&quot;>Home page</a></td>

</tr>
</table>

</body>
</html>