IntegraMOD

Hi folks,


I stumbled upon a little code modification an hour ago (intended for phpBB) that uses an alpha-effect on the "New Post" & "Reply" buttons to create a MouseOver effect without having to load 2 images.

Figured it might be handy for some people, especially considering that IntegraMod is already a fairly image-intensive mod. This should work on any image (of all common extensions) you like to apply it to.

Add the following lines to your template's .css file:

Code: Select all

 .img_alpha_on {opacity]

[Q] What does it do?
[A] It will add 2 classes to your .css file. This will cause the image to weaken (get less strong and thus a little darker) when [b]class="img_alpha_on"[/b] and will return to full strength (thus full brightness) when [b]class="img_alpha_off"[/b]


Now, on any image you like to have the slightly faded out effect and full brightness when Mouse is over the image, add the following code to your [b]<IMG>[/b]
[code]  class="img_alpha_on" onMouseOver="this.className='img_alpha_off'" onMouseOut="this.className='img_alpha_on'"  [/code]

[Q] What does it do?
[A] Here you're actually only telling the browser to use [b]class="img_alpha_on"[/b] upon loading the image, use [b]class="img_alpha_off"[/b] when mouse is hovering over the image and return to [b]class="img_alpha_on"[/b] when mouse is no longer hovering  above the image.

Here's an example taken from my original [b]viewtopic_body.tpl[/b]]  <td><BEGIN><a><img></a><END><BEGIN><a><img></a><END></td>  

Which would, with the code addition, look like this:

Code: Select all

 <td><BEGIN><a><img></a><END><BEGIN><a><img></a><END></td>  

The original code was slightly different, using a much longer line to add in the <IMG> thingy... but had the problem that it wasn't compatible with IE and browsers like Firefox at the same time. The version described above works on both!


Hope I was able to explain it so others understand it (which were not aware of this method yet). If not, I'll check in on this topic from time to time to see if I could help answer questions about it. <img>
Should you like to seen an example, I've currently only applied it on the "New Post" & "Reply" buttons in the theme I've just created, but will add the effect to more images. Cleaning-up the code and some final changes have priority atm before offering the theme to the community.

My Current Test-Site]http://www.net-clan-css.com[/url]


Have fun,

_nGAGEà¢Ãƒ ¢Ã¢â€š ¬Ã… ¾Ãƒâ€šÃ‚ ¢

This is very usefull, thanks! <img>

No problem Whisky!

This is a cool, I wish i had seen it sooner. <img>

Thanks nGAGE, it works perfect!