events attached to all specified element in STYLE

[Tails]

Can you add events to the STYLE block in CSS?

I want to have all my images have an opacity when the mouse is over them, but my attempt at putting events in the STYLE block have not worked. Also, the hover pseudo element does not work as img:hover. I tried
img{onMouseOver="filter:alpha(opacity:20)"}
as well. Is there a working way to do all of this?

[jkd]

img:hover

works fine in Mozilla. :)

As for attaching events and behaviors in general using CSS... IE provides Element and ViewLink behaviors via HTML Components (.htc files). Moz can do the same through XBL (eXtensible Binding Language).

Neither are necessarily easy to learn, or at least to quickly use effectively, but both are incredibly powerful.

[cg9com]

Originally posted by jkd
img:hover

works fine in Mozilla. :)
dont rub it in his face ;)
you would think by now IE would support something as mindless as this ...

as far as the mouseover, these are javascript event handlers and would not go in the CSS ..... but inline the anchor tag.

<a onmouseover="" ect.

[beetle]

Here's an alpha-rollover script I wrote for somebody a while ago. It's IE-only but can be modified to work with Mozilla, too.function doImage( e, over )
{
if ( !document.all ) return;
var img = e.srcElement;
if ( img.nodeName != "IMG" ) return;
if ( over )
img.filters.alpha.opacity = 100;
else
img.filters.alpha.opacity = 65;
}And here's how it's applied<div id="thumbs" onmouseover="doImage(event, 1)" onmouseout="doImage(event, 0)">
<img src="blah.gif" />
<img src="blah2.gif" />
<img src="blah3.gif" />
<img src="blah4.gif" />
</div>And just put this in your CSSdiv#thumbs img {
filter: alpha(opacity=65);
}If you want help customizing it, let me know...

[Tails]

I don't quite understand it (I can't try til later) but will this work on all IMG tags on the page or in a DIV without me having to put an onMouseOver and onMouseOut for each of them?

[beetle]

Originally posted by Tails
I don't quite understand it (I can't try til later) but will this work on all IMG tags on the page or in a DIV without me having to put an onMouseOver and onMouseOut for each of them? Yes, that's exactly it's purpose. It's designed to work on images contained by a DIV. Could work just as well with a TABLE too.

[Tails]

Thanks ^_^, that's exactly what I'm looking for.:)

[Tails]

But that function only applies with an onMouseOver event attached to every image on the page. I tried making something with onLoads and if(event.srcElement) but that didn't work. Then for(i=0; i<document.all.length;i++)
{
if (document.all[i]=document.all("IMG"))
{
document.images[i].style.filter.opacity="20"
}
}

(I know it's not exact, but I don't have the original script and I am in a hurry, still didn't work.).

and that didn't work either. So I look at the .htc option. Can someone tell me more about it? Do I need access to my server and install stuff? Or is it built into IE so I can test it offline? Please show me a tutorial on it, thanks.

[beetle]

Originally posted by Tails
But that function only applies with an onMouseOver event attached to every image on the page. :confused: Wha??? :confused:
Originally posted by beetle
And here's how it's applied<div id="thumbs" onmouseover="doImage(event, 1)" onmouseout="doImage(event, 0)">
<img src="blah.gif" />
<img src="blah2.gif" />
<img src="blah3.gif" />
<img src="blah4.gif" />
</div>Sorry, you've totally lost me. I can show you how HTCs work, if you want and IE-only solution.

[Quiet Storm]

Doesn't this work for you?



<DIV style="height:1px;" onmouseover="this.style.filter='Alpha(Opacity=20)'" onmouseout="this.style.filter='Alpha(Opacity=100)'" />
<img src="blah.gif"><br>
<img src="blah2.gif"><br>
<img src="blah3.gif"><br>
<img src="blah4.gif"><br>
</DIV>


or even this:


<img src="YourImage.gif" onmouseover="this.style.filter='Alpha(Opacity=70)'" onmouseout="this.style.filter='Alpha(Opacity=100)'" />

[brothercake]

Although IE sadly doesn't support :hover on arbitrary elements, you can get round that by styling an <a> like a container - tiling images and text inside it.

Check out http://af.brothercake.com/_template.html which I'm working on at the moment - the two navigation strips at the top are just unordered lists - the rest is all CSS.

[Tails]

I forgot about the div part. I thought I copied the page source to view the stuff at home, but I guess I forgot. My memory will recover, but til then, don't flame me! I mean, thanks for the help.