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

3 state menu with fade in - fade out effect.

Move the mouse over this menu and you will see 3 state images. But the changes of the image occur gradually. It is more pleasant for eyes.
You can make the menu with any quantity of items. The menu can be vertical or horizontal (see example). You can even make separate buttons with such effect.

If you like it the menu, 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="h2.gif"> <div id="im1" width=142 height=44 style="position:relative"><a href=1.htm onmousedown="document.img1.src='h3.gif'"><img name="img1" border=0 src="h1.gif" width=142 height=44 alt="home"></a></div> </td></tr>  <tr><td background="p2.gif"> <div id="im2" width=142 height=44 style="position:relative"><a href=1.htm onmousedown="document.img2.src='p3.gif'"><img name="img2" border=0 src="p1.gif" width=142 height=44 alt="products"></a></div> </td></tr>  <tr><td background="o2.gif"> <div id="im3" width=142 height=44 style="position:relative"><a href=1.htm onmousedown="document.img3.src='o3.gif'"><img name="img3" border=0 src="o1.gif" width=142 height=44 alt="order"></a></div> </td></tr>  <tr><td background="a2.gif"> <div id="im4" width=142 height=44 style="position:relative"><a href=1.htm onmousedown="document.img4.src='a3.gif'"><img name="img4" border=0 src="a1.gif" width=142 height=44 alt="about"></a></div> </td></tr>  <tr><td background="c2.gif"> <div id="im5" width=142 height=44 style="position:relative"><a href=1.htm onmousedown="document.img5.src='c3.gif'"><img name="img5" border=0 src="c1.gif" width=142 height=44 alt="contact"></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/h3.gif') addImg('templates/p3.gif') addImg('templates/o3.gif') addImg('templates/a3.gif') addImg('templates/c3.gif') // add layers to menu //addMenu(layer, step, start transparency, finish transparency, speed); addMenu('im1', 10, 100, 0, 40); addMenu('im2', 10, 100, 0, 40); addMenu('im3', 10, 100, 0, 40); addMenu('im4', 10, 100, 0, 40); addMenu('im5', 10, 100, 0, 40); </script>

Help for you:

If you badly know programming, order in us a code for your menu.
If you do not have images for the menu, order them in us. We have tens patterns of buttons for the menu (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 for all items - 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.