Full version: jsB@nk » Form » Button » Opacity Script
URL: https://www.javascriptbank.com/opacity-index.html
This script allows you to add a neat fade-in/out effect to images, text, whatever. The effects this script creates can only be seen in IE4+ and Netscape 6+. Older browsers such an Netscape4 should just show the element. If the elements are incorrectly rendered in NS4, try using workaround methods such as wrapping elements in ILAYER tags or something. The script still won't work, but the content should look better.
Full version: jsB@nk » Form » Button » Opacity Script
URL: https://www.javascriptbank.com/opacity-index.html
<style type="text/css">.demo {position:relative;color:#00416e;}.code{color:black;font-family:courier;}body, td{font-size:11px;font-family:verdana;color:#00416e;background-color:white;}.txt{position:absolute;top:0px;left:0px;width:100px;height:20px;color:#00416e;font-weight:bold;font-size:15px;text-align:center;font-family:sans-serif;}.outer{position:relative;width:100px;height:20px;}.img{position:absolute;left:0px;top:0px;width:100px;height:20px;filter:alpha(opacity=0);-moz-Opacity:0;}.fakeBttns{width:100px;height:20px;cursor:default;color:#fff6e9;background-color:#00416e;padding-top:2px;border-width:2px;border-style:outset;border-color:#00416e;font-size:14px;font-style:sans-serif;font-weight:bold;-moz-Opacity:0;}.bttnImg{width:100px;height:20px;-moz-Opacity:0;filter:alpha(opacity=0);}textarea{font-size:10px;font-family:verdana;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript" src="opacity.js"></script><div class="demo"><b>Example 1</b><br>Fade-in effect using images</div><br><div id="img1" class="bttnImg"><img src="b1.jpg" width="100" height="20"></div><div id="img2" class="bttnImg"><img src="b2.jpg" width="100" height="20"></div><div id="img3" class="bttnImg"><img src="b3.jpg" width="100" height="20"></div><div id="img4" class="bttnImg"><img src="b4.jpg" width="100" height="20"></div><div class="demo"><b>Example 2</b><br>Fade-out effect using images</div><br><div id="img5" class="bttnImg"><img src="b1.jpg" width="100" height="20"></div><div id="img6" class="bttnImg"><img src="b2.jpg" width="100" height="20"></div><div id="img7" class="bttnImg"><img src="b3.jpg" width="100" height="20"></div><div id="img8" class="bttnImg"><img src="b4.jpg" width="100" height="20"></div><div id="txt1" class="fakeBttns">Text 1</div><div id="txt2" class="fakeBttns">Text 2</div><div id="txt3" class="fakeBttns">Text 3</div><div id="txt4" class="fakeBttns">Text 4</div><div id="txt5" class="fakeBttns">Text 5</div><div id="txt6" class="fakeBttns">Text 6</div><div id="txt7" class="fakeBttns">Text 7</div><div id="txt8" class="fakeBttns">Text 8</div><div class="demo"><b>Example 4</b><br>Fade-out effect using images with underlying text</div><br><div style="width:100px; font-size:18px;"><div class="outer"><layer><div class="txt">Text 1</div></layer><layer><div id="img9" class="img"><img src="b1.jpg" width="100" height="20"></div></layer></div><div class="outer"><layer><div class="txt">Text 2</div></layer><layer><div id="img10" class="img"><img src="b2.jpg" width="100" height="20"></div></layer></div><div class="outer"><layer><div class="txt">Text 3</div></layer><layer><div id="img11" class="img"><img src="b3.jpg" width="100" height="20"></div></layer></div><div class="outer"><layer><div class="txt">Text 4</div></layer><layer><div id="img12" class="img"><img src="b4.jpg" width="100" height="20"></div></layer></div></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/form/opacity/opacity.jshttp://javascriptbank.com/javascript/form/opacity/b1.jpghttp://javascriptbank.com/javascript/form/opacity/b2.jpghttp://javascriptbank.com/javascript/form/opacity/b3.jpghttp://javascriptbank.com/javascript/form/opacity/b4.jpg