vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)
-   -   Mini Mods - Add Opacity to your images on mouse over with JavaScript (https://vborg.vbsupport.ru/showthread.php?t=215369)

dxflw 06-03-2009 10:00 PM
Add Opacity to your images on mouse over with JavaScript
 
1 Attachment(s)
Also this is my first code that i share with other users here in vbulletin.org

With this simple script you can change the opacity display to your images and looks with tech style.
I use this code to my homepage on vbadvanced modules but i think is not
hard to use it and like bbcode for images.

1) Only for adv_portal template:
Go to admincp/Style manager/choose your style<->expand style templates/Vbadvanced CMPS templates/adv_portal

find:

Code:
$footer
and bellow add this script..

Code:
<script language=JavaScript>
<!--
var itv = 50;
var step = 10;
var start = 0;
var end = 0;
var currentOpac;

//change the opacity for different browsers
function changeOpac(obj, opacity) {
        var object = obj.style;
        object.opacity = (opacity / 100);
        object.MozOpacity = (opacity / 100);
        object.KhtmlOpacity = (opacity / 100);
        object.filter = "alpha(opacity=" + opacity + ")";
}

function BeginOpacity(obj, s, e)
{
        start = s;
        end = e;
        currentOpac = s;
        theobject=obj;
        changing=setInterval("opacityit(theobject)",itv);
}

function EndOpacity(obj, end){
        clearInterval(changing);
        changeOpac(obj, end);
}

function opacityit(obj){
        if(start > end) {
                if (currentOpac>end){
                        currentOpac = currentOpac - step;
                        changeOpac(obj,currentOpac);
                }
                else if (window.highlighting)
                        clearInterval(highlighting);
        } else if(start < end) {
                if (currentOpac<end){
                        currentOpac = currentOpac + step;
                        changeOpac(obj,currentOpac);
                }
                else if (window.changing)
                        clearInterval(changing);
        }
}
//-->
</script>
Now save the template.

2) Go admincp/vBa CMPS/Edit modules
Now if you have custome modules with images and you like to use the script you have only to add the code bellow to every image you like to display the script.

Add to every image you like the bellow code:

Code:
style="FILTER: alpha(opacity=40);-moz-opacity: 0.4; opacity: 0.4;"
onmouseover=BeginOpacity(this,40,100) onmouseout=EndOpacity(this,40)
in example:
Code:
<img src="your_image_path" width="100" height="100" border="0"
style="FILTER: alpha(opacity=40);-moz-opacity: 0.4; opacity: 0.4;"
onmouseover=BeginOpacity(this,40,100) onmouseout=EndOpacity(this,40)>
DEMO

Save and finish :)

TimberFloorAu 06-04-2009 09:52 PM
Looks cool. Not something I need, but good effort mate

ArnyVee 06-04-2009 11:01 PM
Nice work. Seems like there has to be another/easier way to pull this off though. But, looks very good on your site! :up:

FreshFroot 06-05-2009 07:25 AM
nice work! love it!

Wayne Luke 06-05-2009 01:50 PM
Quote:
Originally Posted by ArnyVee (Post 1823642)
Nice work. Seems like there has to be another/easier way to pull this off though. But, looks very good on your site! :up:
Could use a technique as outlined here: http://vbcodex.com/showthread.php?t=73

Then you just need a unique CSS identifier and four lines of CSS code for your images to get similar effects.

tlwwolfseye 06-05-2009 02:07 PM
How would I have to adapt this to make it work for vBCms instead ?

ArnyVee 06-06-2009 12:55 AM
Quote:
Originally Posted by Wayne Luke (Post 1823904)
Could use a technique as outlined here: http://vbcodex.com/showthread.php?t=73

Then you just need a unique CSS identifier and four lines of CSS code for your images to get similar effects.
Wow, seems simple on your explanation at the vBCodex.com site Wayne. So, I'm going to follow those instructions this weekend and see if I can get it to work :)

Thanks! :up:

dxflw 06-06-2009 01:53 PM
Quote:
Originally Posted by tlwwolfseye (Post 1823911)
How would I have to adapt this to make it work for vBCms instead ?
I never use cms so i have no idea about the templates of cms..
If any body knows about that will be great.:up:

dazed12 06-10-2009 11:32 PM
it is very simple. all you have to do is put in headerinclude the javascript code. then insert the other code to the image src so it makes it work for just that image. this way you can do it for any image basically.


All times are GMT. The time now is 01:53 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01010 seconds
  • Memory Usage 1,736KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (4)bbcode_code_printable
  • (3)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (9)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete