Add Opacity to your images on mouse over with JavaScript

Add Opacity to your images on mouse over with JavaScript

Mod Version: 1.00, by dxflw

vB Version: 3.8.2	Rating: (1 vote - 4.00 average)	Installs: 5
Released: 05 Jun 2009	Last Update: Never	Downloads: 0
Not Supported Template Edits

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

http://ellinofrenia.com/forum/

Save and finish

Download

No files for download.

vBulletin LTS