View Full Version : Thumb mouseover effects
DirtyDani
2005-12-10, 02: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? (http://www.gentlemenspalace.com/)
Thanks a bunch to anyone who can explain in laymans terms;)
Danielle
MadMax
2005-12-10, 02:42 PM
for what it's worth, I don't see any mouseover effects with firefox.
They are using a CSS alpha channel filter to set the opacity to 50% onMouseOver.
<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, 07: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.
...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, 07: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, 07: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 (http://www.javascriptkit.com/dhtmltutors/cssimage.shtml) - easy and works in both browsers as far as I can see
Cheers! |headbang|
Mattinblack
2005-12-11, 08: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
vBulletin® v3.8.1, Copyright ©2000-2026, Jelsoft Enterprises Ltd.