Mini Mods - Add Opacity to your images on mouse over with JavaScript

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:

$footer

and bellow add this script..

<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:

 style="FILTER: alpha(opacity=40);-moz-opacity: 0.4; opacity: 0.4;" 
onmouseover=BeginOpacity(this,40,100) onmouseout=EndOpacity(this,40)

in example:

<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]

Looks cool. Not something I need, but good effort mate

[ArnyVee]

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]

nice work! love it!

[Wayne Luke]

Originally Posted by ArnyVee

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]

How would I have to adapt this to make it work for vBCms instead ?

[ArnyVee]

Originally Posted by Wayne Luke

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]

Originally Posted by tlwwolfseye

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]

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.