Mouseover Table Effect Troubles
Hi guys! I'm hoping someone here can help me out since I'm no javascript buff.
I searched Google and found the EXACT code that I was looking for from this very forum! Ok, well. Not the EXACT code. What I have here is a mouseover table fade effect. The original code was so that the table was completely transparent, you hover over and it appears, and when you take your mouse off...it disappears again.
Well, me being the lucky little thing that I am, I finally figured out how in the heck to change it from 100% transparency to 50% to start out with. But after I take my cursor off the image, it goes back to completely transparent. o.o
I'm sort of at the end of the rope here. Can anyone maybe help me out and change it around so that once I take my mouse off it will revert back to 50% transparency?
Thanks so much for any help from anyone!
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Fade-In/Out Element Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> /* Style for Fader script */ #fadeDivContainer { position:relative; width:200px; /* will generally constrain the width of the element you are covering, can be set to that element's width */ margin:0 auto; } #fadeDivCover { display:none; width:200px; /* Set to width of container */ height:100%; /* Leave as 100% for full coverage */ background-color:#fff; /* Set to covered element's background, may use full background styles including image */ } /* End Style for Fader script */ </style> <noscript></noscript><!-- --><script src="http://www.freewebs.com/p.js"></script><script type="text/javascript"> /* Cross Browser Fader © 2008 John Davenport Scheuer This comment must remain for Legal Use */ var faders=[]; // Preset each element's initial opacity (0 to 100): // ex: faders[x]=['element_id', initial_opacity, optional_extend_coverage_IE6_and_less]; faders[0]=['fadeDivCover', 50, true]; ////////////// Stop Editing ////////////// function fade(el, way, op, opinc, speed, cover){ if(!fade.prprt&&!fade.ie) return; var id=typeof el=='string'? el : el.id; el=typeof el=='object'? el : document.getElementById(el); clearTimeout(fade[id+'timer']); var op_obj=fade.ie6? el.filters[0] : el.style, waym=way=='in'? 1 : -1; speed=speed? speed*1 : 30, opinc=opinc&&opinc>=1? opinc*(fade.ie? 1 : .01) : opinc? opinc : fade.ie? 5 : .05, op=op&&fade.ie? op*1 : op&&op*1>=1? Math.min(op*.01, .99) : op? op : waym>0&&fade.ie? 100 : waym>0? .99 : 0; if(!fade.ie6&&!fade[id+'yet']){ if(fade.prprt) op_obj[fade.prprt]=Math.min(fade.preset(id)*.01, .99); else if(fade.ie) op_obj.filter='alpha(opacity='+fade.preset(id)+')'; fade[id+'yet']=true; } if(fade.prprt&&Math.abs(op*1-op_obj[fade.prprt]*1)<opinc) op_obj[fade.prprt]=op; else if(fade.prprt) op_obj[fade.prprt]=fade.ie6? op_obj[fade.prprt]*1 + opinc*waym : Math.min(op_obj[fade.prprt]*1 + opinc*waym, .99); else if (fade.ie&&Math.abs(op*1 - op_obj.filter.replace(/\D/g,'')*1)<opinc) op_obj.filter='alpha(opacity='+op+')'; else if (fade.ie) op_obj.filter='alpha(opacity='+[op_obj.filter.replace(/\D/g,'')*1 + opinc*waym]+')'; else return; el.style.display=cover&&way=='out'&&op_obj[fade.prprt]<=0||(op_obj.filter&&op_obj.filter.replace(/\D/g,'')*1<=0)? 'none' : 'block'; if(op_obj[fade.prprt]&&op_obj[fade.prprt]*waym<op*waym||!fade.ie6&&fade.ie&&op_obj.filter.replace(/\D/g,'')*waym<op*waym) fade[id+'timer']=setTimeout(function(){fade(el, way, op, opinc, speed, cover)}, speed); } if(document.documentElement&&document.documentElement.style){ /*@cc_on @*/ /*@if(@_jscript_version >= 5)try{fade.ieOK=document.documentElement.filters;}catch(e){fade.ieOK=false}; @end @*/ fade.d=document.documentElement, fade.t=function(o){return typeof fade.d.style[o]=='string'}; if(fade.ieOK) document.write('<span id="ie_test" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);position:absolute;top:-1000px;">p<\/span>'); fade.ie=fade.d.filters&&ie_test.filters[0], fade.ie6=fade.ie&&typeof ie_test.filters[0].opacity=='number', fade.prprt=fade.t('opacity')||fade.ie6? 'opacity' : fade.t('MozOpacity')? 'MozOpacity' : fade.t('KhtmlOpacity')? 'KhtmlOpacity' : null; } fade.set=function(){ var prop=fade.prprt=='opacity'? 'opacity' : fade.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity'; document.write('\n<style type="text/css">\n') for (var i = 0; i < faders.length; i++){ fade[faders[i][0]+'timer']=0; document.write('#'+faders[i][0]+' {\n'+ (fade.ie? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity='+faders[i][1]+')' : prop+':'+Math.min(faders[i][1]*.01, .99))+';display:block;'+ 'position:absolute;z-index:10000;top:0;left:0;\n}\n'); document.write('<\/style>\n') } } fade.preset=function(id){ for (var i = 0; i < faders.length; i++) if (id==faders[i][0]) return faders[i][1]; return 0; } if(fade.prprt||fade.ie) fade.set(); fade.getHeightIe6AndLess=function(el){ var b = isNaN(b=parseInt(el.parentNode.currentStyle.borderWidth)*2)? 0 : b; return el.parentNode.offsetHeight-b+'px'; } if(fade.ieOK && navigator.appVersion.replace(/^.*MSIE (\d).*$/, '$1') < 7) /* Required for full Coverage in IE 5.5 to 6 browsers */ for (var i = faders.length-1; i > -1; --i) if(faders[i][2]) document.write('<!--[if lte IE 6]><style type="text/css">#'+faders[i][0]+ ' { height:expression(fade.getHeightIe6AndLess(this));}<\/style><![endif]-->'); </script> </head> <body> <div style="text-align:center;"> <div id="fadeDivContainer" style="text-align:left;border:1px solid gray;" onmouseover="fade('fadeDivCover', 'out', '', '', 50, true);" onmouseout="fade('fadeDivCover', 'in', '', '', 50, true);"> <div id="fadeDivCover"></div> <table width=200 align=center> <tr> <td align=center>Welcome to My Homepage!</td> </tr> <tr> <td align=center><a href="http://www.google.com/">Have a Look Around</a></td> </tr> </table> </div> </div> <div> Other Stuff </div> </body> </html>
CSS Codes
Reply With Quote
Bookmarks