Tutoriales de Javascript

« ‹ 1 2 3/4 4 › »
Validación campos de formulario 2 en java
Introducción

Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final. 



<html>
<head>
<title>Validación campos de formulario</title>
</head>
<p align="center"><b>Validación campos de formulario
<script language="javascript">
function validacion(formulario) {

var er_nombre = /^([a-z]|[A-Z]|á|é|í|ó|ú|ñ|?|s|.|-)+$/	//letras, . y - o vacio
var er_telefono = /^([0-9s+-])+$/	//numeros, espacios, + o -
//fechas, formato dd/mm/aaaa o d/m/aa
var er_mes31dias = /^([1-3]0|[0-2][1-9]|31|[0-9])/(1|01|3|03|5|05|7|07|8|08|10|12)/
(1999|20[0-1][0-9]|2020)$/
var er_mes30dias = /^([1-3]0|[0-2][1-9]|[0-9])/(4|04|6|06|9|09|11)/(1999|20[0-1]
[0-9]|2020)$/
var er_mes28dias = /^([1-2]0|[0-2][1-8]|[0-1]9|[0-9])/(02|2)/(1999|200[1-3]|
200[5-7]|2009|201[0-1]|
201[3-5]|201[7-9])$/
var er_mes29dias = /^([1-2]0|[0-2][1-9]|[0-9])/(02|2)/(2000|2004|2008|2012|
2016|2020)$/
//direccion de correo electronico
var er_email = /^(.+@.+..+)$/
var x
//comprueba 50 caracteres maximo
for(x = 1; x < 5; x++) {
if (formulario.elements[x].value.length > 50) {
alert(La lontitud máxima permitida para cualquier campo es de 10 caracteres.)
return false
}
} 
//comprueba campo de nombre
if(!er_nombre.test(formulario.nombre.value)) { 
alert(Contenido del campo NOMBRE no válido.)
return false
} 
//comprueba campos de telefonos (permite campos vacios y guiones)
if( !er_telefono.test(formulario.telefono.value) ) {
alert(Contenido del campo TELEFONO no válido.)
return false
}
//comprueba la fecha segun calendario (hasta el 2020, ojo)
if (!(er_mes31dias.test(formulario.fecha.value) || 
er_mes30dias.test(formulario.fecha.value) ||
er_mes29dias.test(formulario.fecha.value) ||
er_mes28dias.test(formulario.fecha.value))) {
alert(Contenido del campo FECHA no válido.)
return false
}
//comprueba campo de email
if(!er_email.test(formulario.email.value)) { 
alert(Contenido del campo E-MAIL no válido.)
return false
} 
alert(Los campos introducidos son CORRECTOS.)
return false	//cambiar por return true para ejecutar la accion del formulario
}
</script>

<body>
<!-- Para visualizar el formulario -->
</b></p>
<form onsubmit="return validacion(this)" name="FormValidacion">
<p align="center"><small>Nombre:<br>
</small><input type="text" name="nombre" size="15"><br>
<small>Teléfono:<br>
</small><input type="text" name="telefono" size="15"><br>
<small>Fecha (dd/mm/aaaa):<br>
</small><input type="text" name="fecha" size="15"><br>
<small>Email:<br>
</small><input type="text" name="email" size="15"></p>
<p align="center"><input type="submit" value="Enviar" name="boton_envio">
<input type="reset" value="Borrar" name="boton_borrar"></p>
</form>
</body>
</html>


Autor: S/A
Validación campos de formulario en java
Introducción

Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final. 



<html>
<head>
<title>Validación campos de formulario</title>
</style>
<p align="center"><b>Validación campos de formulario
<script Language="Javascript"><!--
function validar(formulario)
{

if (formulario.nombre.value.length < 4)
{
alert("Escriba por lo menos 4 caracteres en el campo "nombre".");
formulario.nombre.focus();
return (false);
}

var checkOK = "ABCDEFGHIJKLMNñOPQRSTUVWXYZáéíóúabcdefghijklmnño
pqrstuvwxyzáéíóú ";
var checkStr = formulario.nombre.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
if (!allValid)
{
alert("Escriba sólo letra caracteres en el campo "nombre".");
formulario.nombre.focus();
return (false);
}

if (formulario.edad.value.length != 2)
{
alert("Escriba un valor mayor o igual que "18" y menor o igual que "30" en el 
campo "Edad".");
formulario.nombre.focus();
return (false);
}

var checkOK = "0123456789-";
var checkStr = formulario.edad.value;
var allValid = true;
var decPoints = 0;
var allNum = "";
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
allNum += ch;
}
if (!allValid)
{
alert("Escriba sólo dígito caracteres en el campo "Edad".");
formulario.edad.focus();
return (false);
}

var chkVal = allNum;
var prsVal = parseInt(allNum);
if (chkVal != "" && !(prsVal >= "18" && prsVal <= "30"))
{
alert("Escriba un valor mayor o igual que "18" y menor o igual que "30" en el 
campo "Edad".");
formulario.edad.focus();
return (false);
}
if ((formulario.correo.value.indexOf (@, 0) == -1)||
(formulario.correo.value.length < 5)) { 
alert("Escriba una dirección de correo válida en el campo "Dirección de correo"."); 
formulario.correo.focus();
return (false); 
}
return (true);
}
//--></script>

<title>Ejemplo de formulario con control de entrada</title>
</head>

</b>

<body bgcolor="#ffffff" text="#000000" link="#054BBB" vlink="#006342" 
background="../images/sombrazul.gif" 
onLoad="window.defaultStatus=Ejemplo de formulario con control de 
entrada; return true">

</p>

<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="480" valign="top" align="left"><table border="0" width="100%">
<tr>
<td width="100%"><p align="center">&nbsp;</p>
<h2><font size="2" face="Arial">Ejemplo de formulario</font></h2>
<p>Introduzca sus datos personales: </p>
<form method="POST" name="registro" onsubmit="return validar(this)" 
action="formularios.asp">
<table border="0" width="350" cellspacing="3">
<tr>
<td width="50%" align="right"><font size="2">Nombre</font></td>
<td width="50%"><input type="text" name="nombre" size="20"></td>
</tr>
<tr>
<td width="50%" align="right"><font size="2">Edad</font></td>
<td width="50%"><input type="text" name="edad" size="2" maxlength="2"></td>
</tr>
<tr>
<td width="50%" align="right"><font size="2">Dirección de correo</font></td>
<td width="50%"><input type="text" name="correo" size="20"></td>
</tr>
</table>
<p align="center"><input type="submit" value="Enviar datos" name="enviar"></p>
</form>
</td>
</tr>
</table>
<p><font size="-2">. </font></td>
</tr>
</table>
</body>
</html>


Autor: S/A
Menú se abre al pasar el cursor en java
Introducción

Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final. 



<html>
<head>
<title>Menú se abre al pasar el cursor</title>
<p align="center"><b>Menú se abre al pasar el cursor
<style type="text/css">
A:link{font: 9pt Arial; color:#ffffff;text-decoration:none;} 
A:visited{font: 9pt Arial; color:#ffffff;text-decoration:none;} 
A:hover{font: 9pt Arial; color:#000088;text-decoration:none} 
</style>
</head>

</b>
<body>

</p>
<table border="0" width="130" height="100" onMouseover="bgColor=black" 
onMouseout="bgColor=">
<tr>
<td bgColor="black"><font color="white"><b>Navigation</b></font> </td>
</tr>
<tr>
<td onMouseOver="bgColor=cyan" onMouseout="bgColor=">
<a href="http://www.angelfire.com/games/funpuz/games.html">Games</a> </td>
</tr>
<tr>
<td onMouseOver="bgColor=red" onMouseout="bgColor=">
<a href="http://www.angelfire.com/games/funpuz/time.html">Time</a> </td>
</tr>
<tr>
<td onMouseOver="bgColor=red" onMouseout="bgColor=">
<a href="http://www.angelfire.com/games/funpuz/puzzles.html">Option3</a>
</td>
</tr>
</table>
<p>&nbsp;</p>
</body>
</html>


Autor: S/A
Envia correo con datos de formulario en java
Introducción

Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final. 



<html>
<title>Envia correo con datos de formulario</title>
<head>
<p align="center"><b>Envia correo con datos de formulario 2
<script language="Javascript">
<!--
function dothis(_f)
{
var _e=_f.ename.value;
var _s=_f.subj.value?"?subject="+_f.subj.value:"";
var _b=_f.bod.value?"body="+_f.bod.value:"";
if(_s&&_b) _b="&"+_b; else if(_b)_b="?"+_b;
if(_e)
document.location="mailto:"+_e+_s+_b;
return _e?true:false;
}
//-->

function borrar(_f)
{
_f.ename.value="";
_f.subj.value="";
_f.bod.value="";
}
</script>

</head>
</b>
<body>
</p>
<form>
<p>Enviar a: <input type="text" name="ename" size="20"><br>
Asunto: <input type="text" name="subj" size="20" value="texto del asunto"><br>
Contenido: <input type="text" name="bod" size="20" value="cuerpo del texto"><br>
<input type="button" value="enviar" onClick="dothis(this.form)">
<input type="button" value="borrar" onClick="borrar(this.form)"> </p>
</form>
</body>
</html>


Autor: S/A
Menú que cambia el color de fondo en java
Introducción

Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final. 



<html>
<head>
<title>Menú que al seleccionar cambia color de fondo</title>
<p align="center"><b>Menú que al seleccionar cambia color de fondo
<style>
A	{
font-family : Verdana;
font-size : 20pt;
font-weight : bold;
text-decoration: none;
background-color: 257B2C;
color : ffffff;
}
A:Visited	{
color : ffffff;
}
A:Hover {
color : ffffff;
background-color: 259B34;
font-style:normal;
}
A:Active	{
color : 00ff00;
}
</style>
</head>

</b>
<body bgcolor="#FFFFFF">

</p>
<table border="0" cellspacing="0" style="border-collapse: collapse" 
bordercolor="#111111" cellpadding="0">
<tr>
<td width="100%"><a href="#"><font size="3">&nbsp;Vínculo&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; 1 </font></a></td>
</tr>
<tr>
<td width="100%"><a href="#"><font size="3">&nbsp;Vínculo&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; 2 </font></a></td>
</tr>
<tr>
<td width="100%"><a href="#"><font size="3">&nbsp;Vínculo&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; 3 </font></a></td>
</tr>
<tr>
<td width="100%"><a href="#"><font size="3">&nbsp;Vínculo&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp; 4 </font></a></td>
</tr>
</table>
<p>&nbsp;<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<center>
<p>
<a href="http://www.24fun.com" target="_blank" 
style="font-size:8pt;background-color: ffffff">
&nbsp;Download more free fun-scripts and web special effects for dummies from 
www.24fun.com&nbsp;</a></p>
</center>
<p></p>
</body>
</html>


Autor: S/A
Menú que activa color de fondo en java
Introducción

El código fuente que forma a este menú es muy estenso para mostrarlo, pero lo puedes descargar en la parte de abajo.

Solo tienes que descargar el ejemplo funcionando al final.

Autor: S/A
Menú parte superior 4 en java
Introducción

Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final. 



<HEAD>
<title>Menú parte superior 4 </title>

<script LANGUAGE="Javascript">
var isDOM = (document.getElementById ? true : false); 
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}
function getSty(id) {
return (isNS4 ? getRef(id) : getRef(id).style);
} 
var popTimer = 0;
var litNow = new Array();
function popOver(menuNum, itemNum) {
clearTimeout(popTimer);
hideAllBut(menuNum);
litNow = getTree(menuNum, itemNum);
changeCol(litNow, true);
targetNum = menu[menuNum][itemNum].target;
if (targetNum > 0) {
thisX = parseInt(menu[menuNum][0].ref.left) + 
parseInt(menu[menuNum][itemNum].ref.left);
thisY = parseInt(menu[menuNum][0].ref.top) + 
parseInt(menu[menuNum][itemNum].ref.top);
with (menu[targetNum][0].ref) {
left = parseInt(thisX + menu[targetNum][0].x);
top = parseInt(thisY + menu[targetNum][0].y);
visibility = visible;
}
}
}
function popOut(menuNum, itemNum) {
if ((menuNum == 0) && !menu[menuNum][itemNum].target)
hideAllBut(0)
else
popTimer = setTimeout(hideAllBut(0), 500);
}
function getTree(menuNum, itemNum) {

itemArray = new Array(menu.length);

while(1) {
itemArray[menuNum] = itemNum;
if (menuNum == 0) return itemArray;
itemNum = menu[menuNum][0].parentItem;
menuNum = menu[menuNum][0].parentMenu;
}
}

function changeCol(changeArray, isOver) {
for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
if (changeArray[menuCount]) {
newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;
with (menu[menuCount][changeArray[menuCount]].ref) {
if (isNS4) bgColor = newCol;
else backgroundColor = newCol;
}
}
}
}
function hideAllBut(menuNum) {
var keepMenus = getTree(menuNum, 1);
for (count = 0; count < menu.length; count++)
if (!keepMenus[count])
menu[count][0].ref.visibility = hidden;
changeCol(litNow, false);
}

function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) 
{
this.isVert = isVert;
this.popInd = popInd
this.x = x;
this.y = y;
this.width = width;
this.overCol = overCol;
this.backCol = backCol;
this.borderClass = borderClass;
this.textClass = textClass;
this.parentMenu = null;
this.parentItem = null;
this.ref = null;
}

function Item(text, href, frame, length, spacing, target) {
this.text = text;
this.href = href;
this.frame = frame;
this.length = length;
this.spacing = spacing;
this.target = target;
this.ref = null;
}

function writeMenus() {
if (!isDOM && !isIE4 && !isNS4) return;

for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {
var str = , itemX = 0, itemY = 0;

for (currItem = 1; currItem < menu[currMenu].length; currItem++) 
with (menu[currMenu][currItem]) {
var itemID = menu + currMenu + item + currItem;

var w = (isVert ? width : length);
var h = (isVert ? length : width);

if (isDOM || isIE4) {
str += <div id=" + itemID + " style="position: absolute; left:  + itemX + ; top:  + 
itemY + ; width:  + w + ; 
height:  + h + ; visibility: inherit; ;
if (backCol) str += background:  + backCol + ; ;
str += " ;
}
if (isNS4) {
str += <layer id=" + itemID + " left=" + itemX + " top=" + itemY + " width=" + w + " 
height=" + h + " visibility="inherit" ;
if (backCol) str += bgcolor=" + backCol + " ;
}
if (borderClass) str += class=" + borderClass + " ;

str += onMouseOver="popOver( + currMenu + , + currItem + )" 
onMouseOut="popOut( + currMenu + , + currItem + )">;

str += <table width=" + (w - 8) + " border="0" cellspacing="0" cellpadding=" + 
(!isNS4 && borderClass ? 3 : 0) + "><tr><td align="left" height=" + (h - 7) + "> + 
<a class=" + textClass + " href=" + href + " + (frame ?  target=" + frame + "> : >) 
+ text + </a></td>;
if (target > 0) {

menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;

if (popInd) str += <td class=" + textClass + " align="right"> + popInd + </td>;
}
str += </tr></table> + (isNS4 ? </layer> : </div>);
if (isVert) itemY += length + spacing;
else itemX += length + spacing;
}
if (isDOM) {
var newDiv = document.createElement(div);
document.getElementsByTagName(body).item(0).appendChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = absolute;
ref.visibility = hidden;
}

if (isIE4) {
document.body.insertAdjacentHTML(beforeEnd, <div id="menu + currMenu + div"  + 
style="position: absolute; visibility: hidden"> + str + </div>);
ref = getSty(menu + currMenu + div);
}

if (isNS4) {
ref = new Layer(0);
ref.document.write(str);
ref.document.close();
}

for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
itemName = menu + currMenu + item + currItem;
if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
}
}
with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = visible;
}
}

var menu = new Array();
var defOver = #336699, defBack = #003366;

var defLength = 22;

menu[0] = new Array();
menu[0][0] = new Menu(false, , 5, 0, 17, #669999, #006666, , itemText);
menu[0][1] = new Item( Archivo, #, , 40, 10, 1);
menu[0][2] = new Item( Editar, #, , 40, 10, 2);
menu[0][3] = new Item( Ayudar, #, , 40, 10, 3);
menu[0][4] = new Item( Web, http://gusnz.cjb.net, _new, 40, 10, 0);

menu[1] = new Array();
menu[1][0] = new Menu(true, >, 0, 22, 80, defOver, defBack, itemBorder, itemText);
menu[1][1] = new Item(Abrir, #, , defLength, 0, 0);
menu[1][2] = new Item(Guardar, #, , defLength, 0, 0);
menu[1][3] = new Item(Reabrir, #, , defLength, 0, 4);
menu[1][4] = new Item(Salir, #, , defLength, 0, 0);

menu[2] = new Array();
menu[2][0] = new Menu(true, >, 0, 22, 80, defOver, defBack, itemBorder, itemText);
menu[2][1] = new Item(Cortar, #, , defLength, 0, 0);
menu[2][2] = new Item(Copiar, #, , defLength, 0, 0);
menu[2][3] = new Item(Pegar, #, , defLength, 0, 0);

menu[3] = new Array();
menu[3][0] = new Menu(true, <, 0, 22, 80, defOver, defBack, itemBorder, itemText);
menu[3][1] = new Item(Contenidos, #, , defLength, 0, 0);
menu[3][2] = new Item(índice, #, , defLength, 0, 0);
menu[3][3] = new Item(Acerca de, #, , defLength, 0, 5);

menu[4] = new Array();
menu[4][0] = new Menu(true, >, 85, 0, 120, #333366, #666699, crazyBorder, 
crazyText);
menu[4][1] = new Item(Doc. Reciente:<br>Programación, #, , 36, 4, 0);
menu[4][2] = new Item(Doc. Reciente 2<br>Planificación, #, , 36, 7, 0);
menu[4][3] = new Item(Etc. etc..., #, , defLength, 0, 0);

menu[5] = new Array();
menu[5][0] = new Menu(true, >, -85, -17, 80, defOver, defBack, itemBorder, 
itemText);
menu[5][1] = new Item(Fin de<br>menú, #, , 40, 0, 0);

var popOldWidth = window.innerWidth;
nsResizeHandler = new function(if (popOldWidth != window.innerWidth) 
location.reload());

if (isNS4) document.captureEvents(Event.CLICK);
document.onclick = clickHandle;

function clickHandle(evt){
if (isNS4) document.routeEvent(evt);
hideAllBut(0);
}

function moveRoot(){
with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5);
}
// end -->
</script>
<!-- *** IMPORTANT STYLESHEET SECTION - Change the border classes and text 
colours *** -->
<style>
<!--
.itemBorder { border: 1px solid black }
.itemText { text-decoration: none; color: #FFFFFF; font: 12px Arial, Helvetica }

.crazyBorder { border: 2px outset #663399 }
.crazyText { text-decoration: none; color: #FFCC99; font: Bold 12px Arial, 
Helvetica }
-->
</style>

</HEAD>
<BODY marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" 
onResize="if (isNS4) nsResizeHandler()">
<table bgcolor="#006666" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="17"><font size="1"></font></td></tr></table>


Autor: S/A
Menú parte superior 3 en java
Introducción

Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final. 



<html>
<head>
<title>Menú parte superior 3</title>
<style>
a.topMenu
{
color: black;
font-family: Verdana, Arial, Helvetica;
font-size: 9pt;	text-decoration: none;
font-weight: bold;
}
a.topMenu:hover
{
color: red;
}
a.subMenu
{
color: black;
font-family: Verdana, Arial, Helvetica;
font-size: 9pt;
text-decoration: none;
}
a.subMenu:hover
{
color: red;
}
a.Mail
{
color: #FF6633;
font-family: Verdana, Arial, Helvetica;	font-size: 8pt;
}
a.Mail:hover
{
text-decoration:none;
}
</style>
</head>
<script>
var left_corner_x =101; // x-coordinate of top left corner of dropdown menu 
var left_corner_y = 25; // y-coordinate of top left corner of dropdown menu 
var back_color = #E6E6E6; // the background color of dropdown menu 
var border_color = black; // the color of dropdown menu border
var border_size = 1; // the width of dropdown menu border
var menu_width = 121; // the width of dropdown menu 
//// Dont change these parameters
var delay = 500; /////
var active_layer_id = -1; /////
var on_layer_id = -1; /////
var buff_id = -1; /////

menu_content = new Array (<a href=http://www.geocities.com/menulite/ 
class=subMenu>Inglés</a> | 
<a href=http://menulite.narod.ru/ class=subMenu>ruso</a>,

<a href=/menulite/menu.css class=subMenu>CSS</a> | <a href=/menulite/menu.js 
class=subMenu>Funciones</a> | 
<a href=/menulite/content.js class=subMenu>Parámetros</a>,

<a href=/menulite/desc/ class=subMenu>Descripción</a> | <a href=/menulite/faq/ 
class=subMenu>FAQ</a>,

<a href=/menulite/info/ class=subMenu>Info scripts</a> | 
<a class=subMenu href=mailto:web.master@male.ru>Escríbeme</a>);
</script>

<script>
NS4 = (document.layers) ? 1 : 0;

function layer_enter (id){
on_layer_id = id;
}

function layer_exit (id){
on_layer_id = - 1;
setTimeout (hide(+ id +), delay/5);
}

function menu_enter (id){
if (buff_id >= 0)
hide (buff_id);
show (id);
active_layer_id = id;
}

function menu_exit (id){
setTimeout (hide(+ id +), delay);
buff_id = active_layer_id;
active_layer_id = -1;
}

function show (id){
if (!NS4)
document.all[Menu + id].style.visibility = "visible";
else
document.layers[id].visibility = "visible";
}

function hide (id){
if (active_layer_id != id && on_layer_id != id)
{
if (!NS4)
document.all[Menu + id].style.visibility = "hidden";
else
document.layers[id].visibility = "hide";
}
}

function generate_layers (){
for (i = 0; i < menu_content.length; i++)
{
if (!NS4)
layer_header = <div id=Menu + i +
 onMouseOver="layer_enter ( + i + );" onMouseOut = "layer_exit ( + i + );" +
 style="visibility: hidden; position: absolute; left:  + 
(left_corner_x + menu_width*i) +
; top:  + left_corner_y + ;">;

else

layer_header = <layer id= + i +
 onMouseOver="layer_enter ( + i + );" onMouseOut = "layer_exit ( + i + );" +
 visibility=hide left= + (left_corner_x + menu_width*i) +
 top =  + left_corner_y + >;


layer_header += <table width= + menu_width +  cellpadding=0 cellspacing=0 border=0> 
+
<td bgcolor= + border_color + ><table width= + menu_width +  cellpadding=3  +
cellspacing= + border_size +  border=0><td width= + menu_width +  bgcolor= + 
back_color + >;

elements = menu_content[i].split (/s*|s*/);
layer_body = ;
for (j = 0; j < elements.length; j++)
{
layer_body += elements[j]; 
if ((NS4 && j < elements.length - 1) || (!NS4 && j < elements.length - 1))
layer_body += <hr width= + (menu_width - 8) +  size=1 color=+ border_color + >;

}
layer_footer = </td></table></td></table>;
if (!NS4)
layer_footer += </div>;
else
layer_footer += </layer>;
document.writeln (layer_header + layer_body + layer_footer);

}

}
generate_layers ();
</script>

</b>
<body>
</p>

<table BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="371">
<tr>
<td ALIGN="CENTER" VALIGN="CENTER" WIDTH="10" HEIGHT="20" BGCOLOR="#FFFFFF">
&nbsp;</td>
<td width="361" HEIGHT="20" ALIGN="CENTER" VALIGN="CENTER" BGCOLOR="#000000">
<table BORDER="0" CELLPADDING="0" WIDTH="323">
<tr>
<td ALIGN="CENTER" VALIGN="CENTER" WIDTH="120" HEIGHT="20" BGCOLOR="#FFFFFF">
<a href="/menulite/" onMouseOver="menu_enter (0);" onMouseOut="menu_exit (0);" 
class="topMenu">
Lenguajes</a></td>
<td ALIGN="CENTER" VALIGN="CENTER" WIDTH="120" BGCOLOR="#FFFFFF">
<a href="/menulite/" onMouseOver="menu_enter (1);" onMouseOut="menu_exit (1);" 
class="topMenu">
Descargas</a></td>
<td ALIGN="CENTER" VALIGN="CENTER" WIDTH="120" BGCOLOR="#FFFFFF">
<a href="/menulite/" onMouseOver="menu_enter (2);" onMouseOut="menu_exit (2);" 
class="topMenu">
Descripción</a></td>
<td ALIGN="CENTER" VALIGN="CENTER" WIDTH="120" BGCOLOR="#FFFFFF">
<a href="/menulite/" onMouseOver="menu_enter (3);" onMouseOut="menu_exit (3);" 
class="topMenu">
Info</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>


Autor: S/A
Menú parte superior 2 en java
Introducción

Solo tienes que copear el código que esta abajo y si quieres puedes descargar el ejemplo funcionando al final.



<html>
<head>
<title>Menú parte superior 2</title>
<p align="center">
<br><br><br><b>Menú parte superior 2
<script>
if(document.layers)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=track;
divref=(document.all)?"":"document.";
stlref=(document.all)?"style.":"";

function track(e){
var x=(document.all)?event.x:e.pageX;
var y=(document.all)?event.y:e.pageY;
if(x<1||x>65||y<3||y>73)eval(divref+"b."+stlref+"visibility=hidden"); 
if(x<80||x>145||y<3||y>73)eval(divref+"c."+stlref+"visibility=hidden"); 
if(x<160||x>225||y<3||y>73)eval(divref+"d."+stlref+"visibility=hidden");
}

function reveal(menu){
eval(divref+menu+"."+stlref+"visibility=visible");
}
</script>

<STYLE TYPE="text/css">
BODY{color:black} A:link{color:white} A:visited{color:white} A:hover{color:red}
.bar{
color : white;
position : absolute;
left : 0;
top : 0px;
width : 780px; 
height : 20px;
background : steelblue;
font-family : verdana;
font-size : 10pt;
border-color : white;
border-width : 1px;
}
.menu
{
position : absolute;
width : 65px;
height : 50px;
background : steelblue;
top : 21px;
visibility : hidden;
font-family : verdana;
font-size : 10pt;
border-color : white;
border-width : 1px;
}
</STYLE>

</head>
</b>
<body>
</p>

<DIV ID="a" CLASS="bar">
<A HREF="#" ONMOUSEOVER="reveal(b)">&nbsp; Menu 1</A> |
<A HREF="#" ONMOUSEOVER="reveal(c)">&nbsp; Menu 2</A> &nbsp; |
<A HREF="#" ONMOUSEOVER="reveal(d)">&nbsp; Menu 3</A> &nbsp; | 
</DIV>

<DIV ID="b" CLASS="menu" STYLE="left:0">
<A HREF="#"> Item 1-A </A>
<A HREF="#"> Item 1-B </A>
<A HREF="#"> Item 1-C </A>
</DIV>

<DIV ID="c" CLASS="menu" STYLE="left:80">
<A HREF="#"> Item 2-A </A>
<A HREF="#"> Item 2-B </A>
<A HREF="#"> Item 2-C </A>
</DIV>

<DIV ID="d" CLASS="menu" STYLE="left:160">
<A HREF="#"> Item 3-A </A>
<A HREF="#"> Item 3-B </A>
<A HREF="#"> Item 3-C </A>
</DIV>
</body>
</html>


Autor: S/A
Menú parte superior en java
Introducción

Solo tienes que copear el código que esta abajo y descargar el archivo navcond.js para que funcione el script. Puedes descargar el ejemplo funcionando al final del documento.



<html>
<head>
<title>Menú parte superior</title>
</head>
<p align="center"><br>
<b>Menú parte superior
<script language="Javascript" src="navcond.js"></script>
<script language="Javascript">

var myNavBar1 = new NavBar(0);
var dhtmlMenu;

dhtmlMenu = new NavBarMenu(100, 0);
dhtmlMenu.addItem(new NavBarMenuItem("Home", "http://dynamicdrive.com"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(100, 120);
dhtmlMenu.addItem(new NavBarMenuItem("Noticias", ""));
dhtmlMenu.addItem(new NavBarMenuItem("CNN", "http://www.cnn.com"));
dhtmlMenu.addItem(new NavBarMenuItem("MSNBC", "http://msnbc.com"));
dhtmlMenu.addItem(new NavBarMenuItem("ABCNews", "http://www.abcnews.com"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(110, 120);
dhtmlMenu.addItem(new NavBarMenuItem("Tecnología", ""));
dhtmlMenu.addItem(new NavBarMenuItem("News.com", "http://www.news.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Techweb", "http://www.techweb.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Wired", "http://www.wired.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Dynamic Drive", 
"http://www.dynamicdrive.com"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(100, 150);
dhtmlMenu.addItem(new NavBarMenuItem("Búsqueda", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Yahoo", "http://www.yahoo.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Alta Vista", "http://www.altavista.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Infoseek", "http://www.infoseek.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Excite", "http://www.excite.com"));
dhtmlMenu.addItem(new NavBarMenuItem("HotBot", "http://www.hotbot.com"));
myNavBar1.addMenu(dhtmlMenu);

dhtmlMenu = new NavBarMenu(100, 150);
dhtmlMenu.addItem(new NavBarMenuItem("Webmasters", ""));
dhtmlMenu.addItem(new NavBarMenuItem("Dynamic Drive", "http://dynamicdrive.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Website Abstraction", 
"http://wsabstract.com"));
dhtmlMenu.addItem(new NavBarMenuItem("Freewarejava.com", 
"http://freewarejava.com"));
dhtmlMenu.addItem(new NavBarMenuItem("BrainJar", "http://brainjar.com"));
myNavBar1.addMenu(dhtmlMenu);

myNavBar1.setColors("#000000", "#000000", "#abcdef", "#fffaaa", "#666666", 
"#000000", "#abcdef", 
"#ffffff", "#000080")

var fullWidth;

function init() {
fullWidth = getWindowWidth() 
- (isMinNS4 && getWindowHeight() < getPageHeight() ? 16 : 0);

myNavBar1.resize(fullWidth);
myNavBar1.create();
myNavBar1.setzIndex(2);
}
</script>
</b>
<body onLoad="init()">
</p>
<p align="center">Archivos: <br>
<a href="navcond.js">navcond.js</a></p>
</body>
</html>


Autor: S/A
« ‹ 1 2 3/4 4 › »