Thumb mouseover effects

DirtyDani · 2005-12-10, 01:35 PM

Okay, I barely know HTML and am just learning PHP so bear with me - but how do people get those cool sort of "frosted" mouseover effects on their thumbs - like this?

Thanks a bunch to anyone who can explain in laymans terms

Danielle

MadMax · 2005-12-10, 01:42 PM

for what it's worth, I don't see any mouseover effects with firefox.

Toby · 2005-12-10, 05:34 PM

They are using a CSS alpha channel filter to set the opacity to 50% onMouseOver.

Code:

<style>
.stateon{ FILTER: alpha(Opacity=50); border: 1px black solid; }
.stateoff{ border: 1px black solid; }
.stateclicked{ border: 1px black solid;  FILTER: alpha(Opacity=50); }
</style>

As MadMax noted, this is an Internet Exploder only command.

Simon · 2005-12-10, 06:05 PM

And only Windows Exploder at that.

On the Mac there's no change on mouseover,
not in IE, not in Safari nor Firefox. Still, the
IE users on Windows is a pretty big group.

Toby · 2005-12-10, 06:12 PM

Quote:

Originally Posted by Simon

...Still, the IE users on Windows is a pretty big group.

Win IE users make up about 85% of surfers, on the most recent browser usage stats I've seen. Although Firefox and Safari are cutting into that every month.

swedguy · 2005-12-10, 06:27 PM

EDIT:

Found a page that is less cluttered: http://www.quirksmode.org/css/opacity.html

IE uses "filter:" and Mozilla uses "opacity:". So you can make it work in most browsers.

(old link with some examples: http://www.mandarindesign.com/opacity.html )

DirtyDani · 2005-12-10, 06:32 PM

Hey thanks for all the replies! Great to know about the windows explorer/IE limitation - I'll check out that link and see if I can find something that will work universally.

Edit: good tut here - easy and works in both browsers as far as I can see

Cheers!

Mattinblack · 2005-12-11, 07:36 PM

The semi-transparent navigation panel thingy on there that I coded works both in FF and in IE. If you want any help with lifting my code then let me know ... you could have thumbs that run away from the users mouse even... now that would be effing funny. Or that go more and more transparent the closer the user gets till they reveal another thumb underneath...anything is possible now.

http://kwikfire.com/webmaster-links.html

2005-12-10, 01:35 PM	#1
DirtyDani WHO IS FONZY!?! Don't they teach you anything at school? Join Date: Jun 2005 Posts: 47	Thumb mouseover effects Okay, I barely know HTML and am just learning PHP so bear with me - but how do people get those cool sort of "frosted" mouseover effects on their thumbs - like this? Thanks a bunch to anyone who can explain in laymans terms Danielle __________________ your head a-splode

2005-12-10, 05:34 PM	#3
Toby Lonewolf Internet Sales Join Date: Mar 2005 Location: Houston Posts: 4,826	They are using a CSS alpha channel filter to set the opacity to 50% onMouseOver. Code: <style> .stateon{ FILTER: alpha(Opacity=50); border: 1px black solid; } .stateoff{ border: 1px black solid; } .stateclicked{ border: 1px black solid; FILTER: alpha(Opacity=50); } </style> As MadMax noted, this is an Internet Exploder only command. __________________ Latex Vixens Babes In Boots Well Heeled Women Dressing For Sex Stocking Vixens

2005-12-10, 06:05 PM	#4
Simon That which does not kill us, will try, try again. Join Date: Aug 2003 Location: Conch Republic Posts: 5,150	And only Windows Exploder at that. On the Mac there's no change on mouseover, not in IE, not in Safari nor Firefox. Still, the IE users on Windows is a pretty big group. __________________ "If you're happy and you know it, think again." -- Guru Pitka

2005-12-10, 06:32 PM	#7
DirtyDani WHO IS FONZY!?! Don't they teach you anything at school? Join Date: Jun 2005 Posts: 47	Hey thanks for all the replies! Great to know about the windows explorer/IE limitation - I'll check out that link and see if I can find something that will work universally. Edit: good tut here - easy and works in both browsers as far as I can see Cheers! __________________ your head a-splode

2005-12-11, 07:36 PM	#8
Mattinblack Asleep at the switch? I wasn't asleep, I was drunk Join Date: Nov 2005 Location: London UK in a house share with three 28 yr old girls...perv perv Posts: 215	See my webmasters page on kwikfire The semi-transparent navigation panel thingy on there that I coded works both in FF and in IE. If you want any help with lifting my code then let me know ... you could have thumbs that run away from the users mouse even... now that would be effing funny. Or that go more and more transparent the closer the user gets till they reveal another thumb underneath...anything is possible now. http://kwikfire.com/webmaster-links.html __________________ Mattinblack - <a href="http://pornlinks.kwikfire.com">PornLinks</a> - <a href="http://strange-attractor.kwikfire.com">Strange Attractor</a> - <a href="pnav.kwikfire.com">PORNavigator</a> - <a href="http://ukescort.kwikfire.com/">Fem Escorts</a> - <a href="http://kwikfire.com/">Hosting</a>

2005-12-10, 01:42 PM	#2
MadMax "Without evil there can be no good, so it must be good to be evil sometimes" ~ Satan Join Date: Aug 2004 Location: Motor City, baby, where carjacking was invented! Now GIMME THOSE SHOES! Posts: 2,385	for what it's worth, I don't see any mouseover effects with firefox.

2005-12-10, 06:27 PM	#6
swedguy Vagabond Join Date: Aug 2003 Posts: 2,374	EDIT: Found a page that is less cluttered: http://www.quirksmode.org/css/opacity.html IE uses "filter:" and Mozilla uses "opacity:". So you can make it work in most browsers. (old link with some examples: http://www.mandarindesign.com/opacity.html )