Need Graphics to be Dim Until Mouseover

Forums: Web Development, Css
Email this Topic • Print this Page

I'm trying to find a way to dim some small banners that I am putting on a site. I want to be able to keep them dim (faded; lower opacity) on the web page until a mouseover - upon mouseover I want them to be fully visible.

I don't want to create another copy of the image that is dimmer and simply roll the image over on mouseover. And I cannot mess with the code (for the banners).

Any ideas? Examples?

Thanks.

B-truE

Topic Stats
Top Replies
Link to this Topic

Type: Discussion • Score: 2 • Views: 3,264 • Replies: 5

No top replies

I'm, not sure what code change limitations you have but you can accomplish this without a rollover image by using CSS.

The CSS would be something like this:

Code:

.fade{filter:alpha(opacity=50); -moz-opacity:0.5;}

.normal{filter:alpha(opacity=100); -moz-opacity:1;}

Then you define the image class like this:

Code:class="fade" onmouseover="this.className='normal'" onmouseout="this.className='fade'"

0 Replies

Thanks Craven.

You and your site are so helpful. There aren't many boards where solid answers come forth.

B-truE

0 Replies

Thanks, it's fun to help. Especially when it helps (sometimes it doesn't). ;-)

0 Replies

b-true, here's a pretty simple script to get images to fade in gradually on mouseover -- 'tis a nice effect. . .

Gradual-Highlight Image Script (IE4+, NS6+)

0 Replies

Just remember that the additional javascript in that example works on fewer browsers (though the simply rollover effect should degrade gracefully).

0 Replies

Need Graphics to be Dim Until Mouseover

Related Topics

Quick Links

My Account

able2know