placing javascript within style sheets?? 1

[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

 

[starway]

You will need to wrap all cell content into <a> tag:
<td class=&quot;button&quot;><a>Home Page</a></td>

then use this style:

a.button {
display:block;
background-color:#336;
color:#ccc;
border-top: 1px solid #ccc;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #ccc;
}

a.button:hover {
. . .
//style from &quot;onmouseover&quot;
}

Note that &quot;display:block&quot; will probably ruin your layout in NN4.

 

[jhherring]

Well . . . first, thanks for your reply. In fact, the method you suggest is more or less what I had started with, but I had moved away from using <a> tags, because they require a separate set of styles *IF* you're trying to get the entire table cell to highlight when moused over (which I guess I should have explained). The idea is to have everything in the table cell get highlighted, including both the text and the background color, whenever the user mouses over any part of the cell, not just the stuff between the <a> tags. So, I still need a mechanism to highlight the table cell in addition to the effect generated using <a> tags.

No big deal -- it's just more efficient, more economical, less fuss, to not have to have additional code for the <a> tags, once you've decided to highlight the whole table cell, since you can do it all without the <a> tags at that point.

Sometimes there just isn't a way to do what you want, but thanks for your efforts.


John Herring
jhherring@yahoo.com

 

[starway]

If you read my post carefully, you'll see [tt]display:block[/tt] that I added to the style. This will make the link to fill the entire area, not only the link text. You can also define it's exact dimentions with CSS if you want.
Adding new styles is not a big deal. And you will have to do it anyway - with <a> or without it.

Yes, you could do it without <a>. But I always treat these things as a violation of html principles. If you want something to be highlighted when you point over it and activate a link upon mouse click - then it should be a link.
Of course, it's up to you to decide what to use.

 

[jhherring]

>>> If you read my post carefully, you'll
>>> see display:block that I added to the style.

Since that method is, in fact, exactly what I had done before I wrote in, and it didn't work (see below), I was moving on to other methods. No offense.

>>> This will make the link to fill the entire area,
>>> not only the link text.

This is what SHOULD happen, according to all the books, but I can't get this to happen. Please see code below.

>>> Adding new styles is not a big deal. And you
>>> will have to do it anyway - with <a> or without it.

Of course. I had already done so, to get the button/cell to look the way I wanted it. I just didn't want to have to add even more styles, just to accommodate the <a> tag in addition to the <td> styles I had already created.

>>> Yes, you could do it without <a>. But I always
>>> treat these things as a violation of html principles.

If we accept this proposition, then of what value are onmouseover and other mouse events? Should we just stop using them altogether?

Anyway . . . . what follows is what I just posted to the other thread . . . .

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>

 

[starway]

About this and that mouse events - I don't say to stop using them.
What I say that everything should be used for the purpose it was designed.

Your explanation is good, you just forgot to tell where do you test it. What browser/version?
I tested your code in Opera 5, Opera 6, IE5 aòâ Mozilla for Win - everything works excellent! ALL links change their style. (The exception is NN4, but it shouldn't work there by default)
Maybe there's a problem with IE4? I don't have it and can't test in it.
So I can't even imagine what your problem is...

 

[jhherring]

You're right, I didn't say where/how I'm testing it. (Sorry.) I have been using IE 5.5 Win exclusively, and it fails every time. Never occurred to me that it might be the browser. Thanks for the advice.

John Herring
jhherring@yahoo.com

 

[aniliyengar]

Excellent. AI