...

View Full Version : Table Mouse over effect



RevolutionX
05-02-2006, 09:52 AM
I am apologizing in advance for my utter lack of knowledge about javascript.

i would like a table wide mouse over transparency effect something like this:

default
filter:gray, alpha(opacity=60) ; opacity:0.6; -moz-opacity:0.6;
mouse over
filter:gray, alpha(opacity=100) ; opacity:1.0; -moz-opacity:1.0;

the page (http://designbydefault.com/webdev.htm)
the top is how i want the default effect to look and the lower would be when the mouse over happens

vwphillips
05-02-2006, 12:21 PM
<html>
<title>
</title>
<head>
</head>
<body onload="zxcEleOpacity('Test1',20,10,100,20);">
<table id="Test1" border="1" onmouseover="zxcOpacityEvent(event,'Test1',10,100,100,20);" onmouseout="zxcOpacityEvent(event,'Test1',100,10);">
<tr>
<td width=200 >R0 C0 </td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
<!--
// Element Opacity Part 1 (27-April-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// The effect is only valid for browsers which recognise the opacity property
// i.e. Mozilla Based Browsers plus IE5+, Netscape and Konkorer.
// The element must be a element which has opacity property
// (Images will need to be in a <DIV>)
// The initial opacity may be established from a <BODY> or window onload event call
// and the effect applied or reversed from any event call.
// There may be as many application on a page as required.
//
// Optional Code allows Child Element event bubbles to be cancelled

// Application Notes

// **** Initialising the Opacity

// The element opacity may established from a <BODY> or window onload event call
// The element must be allocated a unique ID name
// e.g. <body onload="zxcEleOpacity('Test1',50);">
// parameter 0 = unique ID name of the element (string)
// parameter 1 = the start opacity value (0 to 100) (digit)

// **** Executing the Effect
// e.g. <div id="Test1" onmouseover="zxcEleOpacity('Test1',100,10,100,20);" style="position:relative;width:100px;height:50px;background-color:red;" ></div>
// Where:
// parameter 0 = object or unique ID name of the element (object or string)
// parameter 1 = the start opacity value (0 to 100) (digit)
// parameter 2 = the finish opacity value (0 to 100) (digit)
// parameter 3 = (optional) the speed (1 = fast, 500 = slow) (digit) (default 100 milliSec)
// parameter 4 = (optional) the number of opacity steps (digit) (default 50)

// To reverse the effect
// transpose parameter 1 and parameter 2
// The speed parameter 3 may also be changed

// **** Optional Code to Cancel Child Element Event Bubbles
//
// MouseOver or MouseOut of any child node of the element will created false mouse over and mouseout event
// the Part 2 Code is required to cancell these events
//
// The calls are now
// e.g.
// <div id="Test1" onmouseover="zxcOpacityEvent(event,'Test1',100,10,100,20);" onmouseout="zxcOpacityEvent(event,'Test1',10,100);"
// style="position:relative;width:200px;height:150px;background-color:red;" >
// <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" >
// </div>
// where:
// parameter 0 = the event (event)
// parameter 1 = object or unique ID name of the element (object or string)
// parameter 2 = the start opacity value (0 to 100) (digit)
// parameter 3 = the finish opacity value (0 to 100) (digit)
// parameter 4 = (optional) the speed (1 = fast, 500 = slow) (digit) (default 100 milliSec)
// parameter 5 = (optional) the number of opacity steps (digit) (default 50)


// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These characters may be changed to characters of choise using global find and replace
//
// The Functional Code Part 1 (about 2K) and Part 2 (about 1.25) are best as External JavaScripts
//
// Tested with IE6 and Mozilla FireFox


// **** Functional Code - NO NEED to Change

var zxcOOPCnt=0;
var zxcOpc;

function zxcEleOpacity(zxcm,zxcsrt,zxcfin,zxcd,zxcstp){
if (typeof(zxcm)=='string'){ zxcm=document.getElementById(zxcm); }
if (zxcm.style.MozOpacity!=null||zxcm.style.opacity!=null||zxcm.style.filter!=null||zxcm.style.KHTMLOpa city!=null){ zxcOpc=true; }
if (!zxcm.oop){
zxcsrt=zxcsrt||100;
zxcOpacity(zxcm.style,zxcsrt);
zxcm.oop=new zxcOOPOpacEle(zxcm,zxcsrt,zxcfin,zxcd,zxcstp);
}
clearTimeout(zxcm.oop.to);
zxcm.oop.fin=isNaN(zxcfin)?zxcm.oop.fin:zxcfin;
zxcm.oop.srt=isNaN(zxcsrt)?zxcm.oop.srt:zxcsrt;
zxcm.oop.delay=isNaN(zxcd)?zxcm.oop.delay:zxcd;
zxcm.oop.stp=isNaN(zxcstp)?zxcm.oop.stp:zxcstp;
zxcm.oop.inc=zxcSteps(zxcm.oop.stp,[zxcm.oop.srt,zxcm.oop.fin]);
zxcm.oop.dir=1; zxcm.oop.cnt=0;
if (zxcm.oop.srt>zxcm.oop.fin){ zxcm.oop.cnt=zxcm.oop.inc.length; zxcm.oop.dir=-1; }
if (!zxcOpc){ zxcm.style.visibility=zxcm.oop.dir<0?'hidden':'visible'; }
zxcm.oop.cngopac();
}

function zxcOOPOpacEle(zxcm,zxcsrt,zxcfin,zxcd,zxcstp,zxcx){
this.obj=zxcm.style;
this.ref='zxcoopopac'+zxcOOPCnt++;
window[this.ref]=this;
this.fin=isNaN(zxcfin)?0:zxcfin;
this.srt=isNaN(zxcsrt)?100:zxcsrt;
this.delay=isNaN(zxcd)?100:zxcd;
this.stp=isNaN(zxcstp)?50:zxcstp;
this.to=null;
}

zxcOOPOpacEle.prototype.cngopac=function(){
if ((this.cnt>0&&this.dir<0)||(this.cnt<this.inc.length-1&&this.dir>0)){
this.cnt+=this.dir;
zxcOpacity(this.obj,(this.inc[this.cnt]));
this.setTimeOut('cngopac();',200);
}
}

zxcOOPOpacEle.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

function zxcOpacity(zxcobj,zxcop){
if (zxcop>100||zxcop<.0010||!zxcop){ return }
if (zxcobj.MozOpacity!=null){ zxcobj.MozOpacity=(zxcop/100)-.001; }
else if (zxcobj.opacity!=null){ zxcobj.opacity=(zxcop/100)-.001; }
else if (zxcobj.filter!=null){ zxcobj.filter='alpha(opacity='+zxcop+')'; }
else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcop/100)-.001; }
}

function zxcSteps(zxcstps,zxcsary){
zxctary=[];
for (zxc1=0;zxc1<zxcstps;zxc1++){
zxctary[zxc1]=Math.floor(Math.abs((zxcsary[0]-zxcsary[1])/(zxcstps-1))*zxc1+Math.min(zxcsary[0],zxcsary[1]));
if (zxctary[zxc1]==0){zxctary[zxc1]=0.01; }
}
if (zxcsary[2]>zxcsary[3]){ zxctary=zxctary.reverse(); }
return zxctary
}

//-->
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Element Opacity Part 2 (27-April-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Required MouseOver/Out actuation if the Element has Child Nodes


// **** Functional Code - NO NEED to Change

function zxcOpacityEvent(zxce,zxcid,zxcsrt,zxcfin,zxcd,zxcstp){
if (zxcCkEventObj(zxce)){ zxcEleOpacity(zxcid,zxcsrt,zxcfin,zxcd,zxcstp); }
}

function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}

function zxcEventFrom(zxce){
var zxcfrom;
if (!zxce) var zxce=window.event;
if (zxce.relatedTarget) zxcfrom=zxce.relatedTarget;
else if (zxce.fromElement) zxcfrom=zxce.fromElement;
return zxcfrom
}

function zxcEventTo(zxce){
var zxcto;
if (!zxce) var zxce = window.event;
if (zxce.relatedTarget) zxcto=zxce.relatedTarget;
else if (zxce.toElement) zxcto=zxce.toElement;
return zxcto
}


//-->
</script>
</body>
</html>

RevolutionX
05-02-2006, 09:54 PM
thank you so very much for the script !!! and your time



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum