Sub Menu
Links Menu
Online Users

In total there are 311 users online :: 1 registered, 0 hidden and 310 guests

Most users ever online was 1091 on Wed Aug 16, 2023 5:27 pm

Registered users: Google [Bot] based on users active over the past 60 minutes

Single Image MousOver effect for images

This forum contains member submitted mods and hacks for IntegraMOD/IM Portal versions

*please read the "Read Me" post*

Moderator: Integra Moderator

Single Image MousOver effect for images

PostAuthor: nGAGE » Wed May 09, 2007 10:58 pm

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à¢Ãƒ ¢Ã¢â€š ¬Ã… ¾Ãƒâ€šÃ‚ ¢
Last edited by nGAGE on Wed May 09, 2007 11:05 pm, edited 1 time in total.
[url=http][img=left]http://www.net-clan-gaming.eu/ftp/ngage/images/nEt_v3_sig.png[/img][/url]
User avatar
nGAGE
Sr Integra Member
Sr Integra Member
 
Posts: 248
Likes: 0 post
Liked in: 0 post
Joined: Mon Mar 27, 2006 6:28 am
Cash on hand: 0.00

PostAuthor: Whisky » Wed May 09, 2007 11:04 pm

This is very usefull, thanks! <img>
Last edited by Whisky on Wed Dec 31, 1969 4:00 pm, edited 1 time in total.
I am the Lizard King, I can do anything

Whisky
Sr Integra Member
Sr Integra Member
 
Posts: 256
Likes: 0 post
Liked in: 0 post
Joined: Thu May 18, 2006 1:28 am
Cash on hand: 0.00
Location: Brussels

PostAuthor: nGAGE » Thu May 10, 2007 1:18 am

No problem Whisky! ;)
Last edited by nGAGE on Wed Dec 31, 1969 4:00 pm, edited 1 time in total.
[url=http][img=left]http://www.net-clan-gaming.eu/ftp/ngage/images/nEt_v3_sig.png[/img][/url]
User avatar
nGAGE
Sr Integra Member
Sr Integra Member
 
Posts: 248
Likes: 0 post
Liked in: 0 post
Joined: Mon Mar 27, 2006 6:28 am
Cash on hand: 0.00

Re: Single Image MousOver effect for images

PostAuthor: CaNNon » Wed Oct 17, 2007 7:20 am

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

Thanks nGAGE, it works perfect!
Last edited by CaNNon on Wed Dec 31, 1969 4:00 pm, edited 1 time in total.
Image
Image
User avatar
CaNNon
Sr Integra Member
Sr Integra Member
 
Posts: 750
Likes: 0 post
Liked in: 0 post
Joined: Thu Apr 19, 2007 11:15 am
Cash on hand: 0.00


Return to Mods/Hacks

Who is online

Registered users: Google [Bot]

cron