3 state buttons with fade in - fade out effect - Free scripts

3 state buttons with fade in - fade out effect.

Move the mouse over this buttons and you will see 3 state images. But the changes of the image occur gradually. It is more pleasant for eyes.
You can make any quantity of buttons in page. Using some buttons you can make the menu for your site (see example). This script works with Internet Explorer and Netscape6.

Examples of use of buttons:

If you like it the buttons, insert this code into your pages and change parameters of the images on necessary to you. (src, width, height).

<table border="0" cellspacing="0" cellpadding="0" width=0 height=0>  <tr><td background="templates/b12.gif"> <div id="im1" width=64 height=24 style="position:relative"><a href=fade_button.htm?tex_c=Button1 onmousedown="document.img1.src='templates/b13.gif'" onmouseout="document.img1.src='templates/b11.gif'"><img name="img1" border=0 src="templates/b11.gif" width=64 height=24 alt="button1"></a></div> </td></tr></table> <script language=javascript> // Do not change this code NS4 = (navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? true : false; NS6 = (navigator.appName.indexOf("Netscape")>=0 && document.getElementById)? true: false; images_=new Array(); num_i=0 function addImg(_img){ images_[num_i]=new Image() images_[num_i].src=_img num_i++ } menus=new Array(); ctr=0; function addMenu(item,step,sp1,sp2,speed){ if(NS4) return; if (document.all){document.all[item].style.width=document.all[item].width;document.all[item].style.height=document.all[item].height} var num=menus.length; menus[num]=(NS6)? document.getElementById(item) : document.all[item]; menus[num].ostep=menus[num].step=step; menus[num].sp1=sp1; menus[num].sp2=sp2; menus[num].speed=speed; menus[num].id=menus[num].count=0; menus[num].fin=true; menus[num].num=num; menus[num].onmouseover=function(){ clearInterval(menus[num].id); if(menus[num].fin)menus[num].count=menus[num].sp1; menus[num].step=(menus[num].sp1>menus[num].sp2)? -menus[num].ostep : menus[num].ostep; menus[num].fin=false; menus[num].id=setInterval('f_var('+this.num+')', this.speed); } menus[num].onmouseout=function(){ clearInterval(menus[num].id); if(menus[num].fin)menus[num].count=menus[num].sp2; menus[num].step=-menus[num].step; menus[num].fin=false; menus[num].id=setInterval('f_var('+this.num+')', this.speed); } menus[num].onmousedown=function(){ clearInterval(menus[num].id); if(menus[num].fin)menus[num].count=menus[num].sp1; menus[num].step=(menus[num].sp1>menus[num].sp2)? -menus[num].ostep : menus[num].ostep; menus[num].fin=false; menus[num].id=setInterval('f_var('+this.num+')', this.speed); } } function f_var(num){ var curr=menus[num]; if(NS6){curr.style.MozOpacity=curr.count/100} else{curr.style.filter="alpha(opacity="+curr.count+")"} curr.count+=curr.step; if((Math.max(curr.sp1,curr.sp2)<curr.count)||(Math.min(curr.sp1,curr.sp2)>curr.count)){ clearInterval(curr.id); curr.fin=true; } } </script> <script language="javascript"> // image preload // add only mousedown images addImg('templates/b13.gif') // add layers to menu //addMenu(layer, step, start transparency, finish transparency, speed); addMenu('im1', 10, 100, 0, 40); </script>

Help for you:

If you badly know programming, order in us a code for your buttons.
If you do not have images for the buttons, order them in us. We have tens templates of buttons (choose a template). Or we can create the original images.

Our prices - only $ 5 per hour. Creations of a code need usually 1 hour. For creation of the images - 1 - 2 hours.

For order, email to us.

If you want to reprogram your site for all browsers (Internet Explorer, Netscape4 and Netscape6) write to us. Our prices - $ 5 per hour.