Opacity change on mouseover buttons

Name: Opacity change on mouseover buttons
Description: This will add a 'fade in/fade out' effect to buttons. Not an animation, strictly on/off effect.
Difficulty: Easy
Screenshot: Attached
Demo: http://www.forumwhatever.co.uk/forumdisplay.php?f=9

Why use it instead of an ordinary image mouseover? Well it does involve template changes unfortunately, but the biggest advantage is that it's a browser effect - aside from a few characters in your CSS it will use zero extra bandwidth over a static image. You can apply it to any button you want without having to create a new image, and it also means that you can universally change opacity levels per theme in a couple of seconds from one section of code without having to edit the image.

Opacity levels are controlled from the numbers in the code, you must change all three numbers to the same equivalent level so all browers display the effect the same. 1.0/100 is fully solid, down to 0.01/01 which is most opaque.


Instructions:
AdminCP > Style Manager > YourTheme > Go

Then in your Additional CSS Definitions add the following:

/* ***** Opacity 'fog' mouseover hack ***** */
.fog { opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4; }
a:hover .fog { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; }

If you want to use the effect on inline images such as the 'Go to last post' image, you'll also need to add this:

/* ***** Opacity 'fog' inline mouseover hack ***** */
.inlineimgfog { vertical-align: middle; opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4;  }
a:hover .inlineimgfog { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; }

The reason for this is that inline images already have a class assigned and we can't add another, so we combine the class definitions into one - inlineimagefog. For images without an existing class, use fog.

All you have to do is locate the image code in the template that you want to add the effect to, and either add class="fog" or change class="inlineimg" to class="inlineimgfog" where appropriate inside the img tag.

I applied the effect in the demo to last post, first new post, new reply and new thread buttons. The locations for template changes for these are below. You may of course use it on any hyperlinked image you wish.


New thread:

FORUMDISPLAY
newthread.gif - Line 52 - fog
newthread.gif - Line 135 - fog

New reply:

SHOWTHREAD
reply.gif - Line 25 - fog
reply.gif - fog - Line 109 - fog

Go to first new post:

THREADBIT
firstnew.gif - Line 20 - inlineimgfog
firstnew.gif - Line 33 - inlineimgfog

SHOWTHREAD
firstnew.gif - Line 40 - inlineimgfog

Go to last post:

FORUMDISPLAY_ANNOUNCEMENT
lastpost.gif - Line 5 - inlineimgfog

FORUMHOME_LASTPOSTBY
lastpost.gif - Line 12 - inlineimgfog
lastpost.gif - Line 18 - inlineimgfog

Done!

[TygerTyger]

A note on the code:

Due to Internet Explorer and older versions of Mozilla using proprietary opacity code (Yes, Mozilla fanboys must hold their hands up too this time) this will break your CSS W3C compliance. It won't make any difference to the functioning of your page, you just won't be able to say it's compliant.

This is not necessarily the best version of image opacity code, but it is the most compatible. It will work in all current major browsers except Opera (lagging behind somewhat, but when they catch up you should be ready) and should degrade gracefully to around NN4 and IE4 (but don't hold me to it.) although it does mean you can only use it on hyperlinked images. There are other ways of doing this, but you'll lose the effect in some browsers, most notably IE which has the most trouble.

If anyone comes up with more widely compatible CSS I'll update to include it.