Topic: Can I assign a script to a CSS class? (Page 1 of 1)

I want to assign a "OnMouseOver" to every object in a particular class. Can this be done?

For example I want a bunch of links with the same MouseOver, so can I assign them a class that has a mouseover assigned to it?

I don't really understand what you mean here.
Do you want your links to react when you mouseover them, changing class/appearance or something like that?

In that case just use :hover
Like this.
<a href... class="linkClass">text</a>

then in the css
.linkClass{
your styles: here;
}

.linkClass:hover{
your styles for when the cursor is over the link: here;
}

Or du you need to call a javascript that does something as well from the css?
We need more info...

/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Otherwise, Google & getElementsByClassName are your friends mate.

Well I'm not sure what example I can give, but basically I want to have a class that has a script attached to it, so any object assigned that class will perform the script on mouseover or by clicking it.
I know I can change the style of links with hover, but I'm looking to do much more, and not necessarily with links.
For example I might want to change my background to a different color whenever the mouse passes over a different picture. I'd want to give the pictures in question a class that has a built-in script which would do just what I want.

Yes, it can be done, using the DOM.
cf: DOM Reference or Peter-Paul Koch's old W3C DOM Compatibility Table

If you want to modify the CSS when a mouse moves over an object you will need to make use of the :hover selector.

I haven't used IE in a long while, and I only open it up to test something I am working on to make sure that it works. But I believe that :hover only works on an anchor link. This is a bit annoying but you can achieve the functionality you are looking for by linking two instances together.

.class a {
...
}

.class a:hover{

}

which would allow for the hover functionality. But you would have to have your content encapsulated in an anchor. Which isn't always what you might want.

I am sure you could achieve this functionality using Javascirpt but you could not trigger the javascript through CSS. The Scripting sits on top of the CSS. This means that the Script can access the CSS but the CSS doesn't even know that the Scripting exists, and therefore does not have the ability to access it.

You would have to use onmouseover="somecode" if you want javascript functionality.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Well I figured this out by pure luck/coincidence. I was looking on a way to make a css hover that would work in IE, as IE only seems to accept hovers on links.
It's possible to attach a script to a CSS class or ID through the use of .htc files
They're used as follows:

.class {
behavior: url(file.htc);
}

and file.htc contains:

<public:component>
<public:attach event="OnMouseOver" onevent="ScriptName>
<script language="javascript">
function ScriptName {
//script goes here
}
</script>
</public:component>


This way, for example, you could add an OnClick function to a table cell or a div, or any html tag through the use of a class or ID. You could even add it directly through the html via style="behavior: url(file.htc);"
This makes me happy

quote:

---

Grover said:

as IE only seems to accept hovers on links.

---

You'd better say: "as IE accept hovers only on links, and the behavior property is another of those proprietary monster." Otherwise, if you can afford to make a script that work only in IE with Windows, go for it.

[edit] At the risk of repeating myself, getElementsByClassName() is the method I'd use for its simplicity and compatibility. [/edit]



(Edited by poi on 05-28-2004 13:00)