Efectos animados con JScript

bueno ai les va un peque?o ejemplo que hice :

Código:

<html>
<head><title>menu animado por icaruss</title></head>
<body bgcolor=black>
<table width=100% border=0 borderstyle=single bordercolor=black cellspacing="1" cellpadding="0" >
<tr><td width=15% border=0 >
<p id=menu1 align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:aqua;cursor:hand;background-color:blue;font-weight:bold
onmouseover=color1(); onmouseout=color2();>Hacking</p></td>
<td width=15% border=0 >
<p id=menu2 align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:aqua;cursor:hand;background-color:blue;font-weight:bold
onmouseover=m2color1(); onmouseout=m2color2();>Cracking</p></td><td width=70%></td></tr>
<tr>
<td width=15% border=0>
<p id=submenu align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:yellow;cursor:hand;background-color:gray;font-weight:bold;visibility:hidden
   onmouseover=colorsub2(); onmouseout=colorsub();>Exploits</p></td>
<td width=15% border=0>
<p id=m2submenu align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:yellow;cursor:hand;background-color:gray;font-weight:bold;visibility:hidden
onmouseover=m2colorsub2(); onmouseout=m2colorsub();>Reverse</p></td>
<td width=70%></td>
</tr>
<tr>
<td width=15% border=0>
<p id=submenu2 align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:yellow;cursor:hand;background-color:gray;font-weight:bold;visibility:hidden
onmouseover=colorsub22(); onmouseout=colorsub21();>Bugs</p></td><td width="15%"></td>
<td width=70%></td></tr>
</table>
<script language="javascript">
//efectos de los menus
//propiedades de el primer menu

function color1(){menu1.style.color="blue";
   menu1.style.backgroundColor="aqua"
   submenu.style.visibility="visible"
   submenu2.style.visibility="visible"
   m2submenu.style.visibility="hidden"}

function color2(){menu1.style.color="aqua"
   menu1.style.backgroundColor="blue"
   }
   //ahora las propiedades de los submenus
function colorsub(){submenu.style.color="yellow"
   submenu.style.backgroundColor="gray" }

function colorsub2(){submenu.style.color="red"
   submenu.style.backgroundColor="white" }

function colorsub21(){submenu2.style.color="yellow"
   submenu2.style.backgroundColor="gray" }

function colorsub22(){submenu2.style.color="red"
   submenu2.style.backgroundColor="white" }

//aqui empezamos un nuevo menu

function m2color1(){menu2.style.color="blue";
   menu2.style.backgroundColor="aqua"
   m2submenu.style.visibility="visible"
   submenu.style.visibility="hidden"
   submenu2.style.visibility="hidden"}

function m2color2(){menu2.style.color="aqua"
   menu2.style.backgroundColor="blue"
   }

function m2colorsub(){m2submenu.style.color="yellow"
   m2submenu.style.backgroundColor="gray" }

function m2colorsub2(){m2submenu.style.color="red"
   m2submenu.style.backgroundColor="white" }

</script>

</body>

</html>

como veran , todo se hizo con una tabla <table> y manejando sus propiedades de visibilidad logre que se viera animado , ademas use CSS para los efectos de el cursor y las propiedades de el texto y obiamente DHTML que es el que permite incluir a CSS en los docs html , jueguen con este codigo , aun se le pueden hacer muchas cosas como : agregar mas menus y agregar accesos directos para que los elementos de los menus sean links a otros documentos html , cambiar colores a su gusto , tipos de letra , etc..

	Autor	Tema: Efectos animados con JScript (Leído 1033 veces)
0 Usuarios y 2 Visitantes están viendo este tema.