. - codigos JavaScript

Codigo,texto con sombra.

<div id="sombra" style="position:relative;width:300;height:50r;filter:shadow(color=#00FFFF)"> <br> <font color=#CC0000 size=5>AQUI TU TEXTO<br></DIV><br> </font></br>

El siguiente menú acompaña el scroll de la página. Se puede utilizar para crear un menú, colocar una imágen, una firma, etc.

Menu Estático

Reloj con dia mes y año
indicando si es de dia o de noche

<CENTER><SCRIPT LANGUAGE="JAVASCRIPT"> ') /* ###################################################################### ################ SCRIPT BY BURNBLADE ##################### ################ Visit My Site At ##################### ################ http://www.burning.net ##################### ################ © copywrite 1997 ##################### modificado por www.creatupropiaweb.com This script may be used as long as the above lines are not changed in any way. */ var watchID = null var watchRun = false function stopwatch(){ if(watchRun) clearTimeout(watchID) watchRun = false } function startwatch(){ stopwatch() dayTime() } function dayTime() { day = new Date(); hour = day.getHours(); minute = day.getMinutes(); second = day.getSeconds(); if (hour > 12) { hours = hour - 12; part = 'Del Dia'} else { part = 'De la Noche'; if (hour == 0) { hours = 12 } else { hours = hour } } if (minute < 10) {minutes = 0} else {minutes = ""} if (second < 10) {seconds = 0} else {seconds =""} date = ('' +"Mes "+(day.getMonth() + 1)+" Dia "+day.getDate()+ " del año "+day.getYear()+ ''); time = ('' + hours + ":"+minutes+""+minute+ ":"+seconds+""+second+ '') parts = ('' +part+ '') document.timedate.time.value = time document.timedate.date.value = date document.timedate.parts.value = parts watchID = setTimeout("dayTime()",1000) watchRun = true } document.write('') // End Digital Watch--> </script> <BODY onLoad="startwatch()"> <form name="timedate" onSubmit="0"> <table cellspacing=0 cellpadding=0> <tr align=center> <td><INPUT TYPE="text" NAME="time" SIZE=6 VALUE ="..Starti"></td> <td><INPUT TYPE="text" NAME="parts" SIZE=12 VALUE ="ng.."></td> <td colspan=2><INPUT TYPE="text" NAME="date" SIZE=28 VALUE ="........"></td> </tr> </table> </form></CENTER> 

Muestra la velocidad de descarga de tu pagina

<Mas scripts en www.creatupropiaweb.com> <form name="velocidad"> <script> function calcular(peso){ fin = new Date(); vel = (peso/1024)/((fin-inicio)/1000)+''; vel = vel.substring(0, 5); document.forms.velocidad.valor.value = vel; } inicio = new Date(); document.write('<img style="position:absolute; visibility:hidden" src="http://TU IMAGEN" onload="calcular(this.fileSize)">'); </script>Página bajada a <input type="text" size="3" name="valor" value="..."> kbps</form>
<body>

<script LANGUAGE="JavaScript"> function setVariables() { if (navigator.appName == "Netscape") { v=".top="; dS="document."; sD=""; y="window.pageYOffset"; } else { v=".pixelTop="; dS=""; sD=".style"; y="document.body.scrollTop"; } } function checkLocation() { object="object1"; yy=eval(y); eval(dS+object+sD+v+yy); setTimeout("checkLocation()",10); } </script>  <body OnLoad="setVariables();checkLocation()">  <div id="object1" style="position:relative; visibility:show; left:0px; top:0px; z-index:5"><div align="right"> <table width="120" border="0" bgcolor="#BCBCBC" cellspacing="1"> <tr> <td bgcolor="#000000"><p align="center"><font face="Arial" color="#FFFFFF"><strong><small>Menu Estático</small></strong></font></td> </tr> <tr> <td bgcolor="#EAEAEA" align="center"><table border="0" width="100%" cellpadding="0"> <tr> <td width="100%"></td> </tr> </table> </td> </tr> <tr> <td bgcolor="#EAEAEA" align="center">Link 1</td> </tr> <tr> <td bgcolor="#EAEAEA" align="center">Link 2</td> </tr> <tr> <td bgcolor="#EAEAEA" align="center">Link 3</td> </tr> <tr> <td bgcolor="#EAEAEA" align="center">Link 4</td> </tr> </table> </div> </div>

El siguiente JavaScript remueve los html tags de los formularios. Ejemplo:

<script LANGUAGE="JavaScript">  </script>  <form action="http://www.tu-sitio.com/cgi-bin/enviar.cgi" name="form" onSubmit="return Check()"> <div align="left"><p><textarea cols="20" rows="3" name="text"></textarea> <br> <input type="submit" value="Enviar"> </p> </div> </form>

El siguiente JavaScript mueve una ventana a través de la pantalla.

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>  <form> <p><input TYPE="button" VALUE="Mover Ventana" onClick="makeAd()"></p> </form>  <script LANGUAGE="JavaScript">  </script>

Con este JavaScript podemos determinar que tipo de archivos se pueden subir (en este caso GIF y JPG)

<script LANGUAGE="JavaScript"> extArray = new Array(".gif", ".jpg"); function LimitAttach(form, file) { allowSubmit = false; if (!file) return; while (file.indexOf("") != -1) file = file.slice(file.indexOf("") + 1); ext = file.slice(file.indexOf(".")).toLowerCase(); for (var i = 0; i < extArray.length; i++) { if (extArray[i] == ext) { allowSubmit = true; break; } } if (allowSubmit) form.submit(); else alert("Se permiten únicamente archivos con la extención: " + (extArray.join(" ")) + "nPor favor, seleccione otro archivo " + "e intente de nuevo."); } </script>

Ejemplo: Hacé clic con el botón de la derecha.

<script LANGUAGE="JavaScript1.1">   function derecha(e) { if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){ alert('Botón derecho inhabilitado') return false; } else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2)){ alert('Botón derecho inhabilitado') } } document.onmousedown=derecha </script>

<script LANGUAGE="JavaScript1.1">   function izquierda(e) { if (navigator.appName == 'Netscape' && (e.which == 1 || e.which == 2)){ alert('Botón izquierdo inhabilitado') return false; } else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 1)){ alert('Botón izquierdo inhabilitado') } } document.onmousedown=izquierda </script>

<script LANGUAGE="JavaScript1.1">   function ambos(e) { if (navigator.appName == 'Netscape' && (e.which == 1 || e.which == 3 || e.which == 2)){ alert('Los botones del mouse han sido inhabilitados') return false; } else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 1 || event.button == 2)){ alert('Los botones del mouse han sido inhabilitados') } } document.onmousedown=ambos </script>

Ejemplo: Ver barra de estado

<script language="JavaScript"> var speed = 100 var pause = 3000 var timerID = null var bannerRunning = false var ar = new Array() ar[0] = ">>>> Este script es entretenido <<<<" ar[1] = " Con él puedes colocar informacion adicional, ....." ar[2] = "..... Datos sobre tu página y muchas otras cosas, ....." ar[3] = "..... No olvides de visitar http://www.geocities.com/literaturadetodos, ....." ar[4] = "..... Y envía tus escritos o dile a tus amigos, ....." ar[5] = "..... poemas, cuentos, crónicas, pensamientos ....." ar[6] = "..... Y si eres mayor de edad visita http://www.geocities.com/literaturayerotismo ....." var currentMessage = 0 var offset = 0 function stopBanner() { if (bannerRunning) clearTimeout(timerID) bannerRunning = false } function startBanner() { stopBanner() showBanner() } function showBanner() { var text = ar[currentMessage] if (offset < text.length) { if (text.charAt(offset) == " ") offset++ var partialMessage = text.substring(0, offset + 1) window.status = partialMessage offset++ // IE sometimes has trouble with "++offset" timerID = setTimeout("showBanner()", speed) bannerRunning = true } else { offset = 0 currentMessage++ if (currentMessage == ar.length) currentMessage = 0 timerID = setTimeout("showBanner()", pause) bannerRunning = true } } startBanner(); // --> </script>

El siguiente javascript nos permite buscar palabras dentro de una página web. Una herramienta útil que se puede utilizar para buscar palabras en páginas que contienen mucho texto. Ejemplo: Buscar la palabra javascript.

<script language="JavaScript"> // By Mike Hall (MHall75819@aol.com) var NS4 = (document.layers); var IE4 = (document.all); var win = window; // Con frames usar top.nombre.window; var n = 0; function findInPage(str) { var txt, i, found; if (str == "") return false; // Find next occurance of the given string on the page, wrap around to the // start of the page if necessary. if (NS4) { // Look for match starting at the current point. If not found, rewind // back to the first match. if (!win.find(str)) while(win.find(str, false, true)) n++; else n++; // If not found in either direction, give message. if (n == 0) alert("Not found."); } if (IE4) { txt = win.document.body.createTextRange(); // Find the nth match from the top of the page. for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } // If found, mark it and scroll it into view. if (found) { txt.moveStart("character", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); n++; } // Otherwise, start over at the top of the page and find first match. else { if (n > 0) { n = 0; findInPage(str); } // Not found anywhere, give message. else alert("Not found."); } } return false; } </script> <form name="search" onSubmit="return findInPage(this.string.value);"> <font size="2"><p></font><font size="3"><input name="string" type="text" size="15" onChange="n = 0;"></font> <input type="submit" value="Buscar"> </p> </form>

Características:

- Se utiliza para cambiar imágenes.

- La imágenes cambian automáticamente sin necesidad de refrescar la página.

- Fácil de configurar: Hay que ingresar únicamente la ubicación de las imágenes y los links.

- Se puede modificar el tiempo que tarda en cambiar las imágenes.

<script LANGUAGE="JavaScript">    </script>  <div id="banner"></div>

Cada vez que un visitante ingresa a la página la frase cambia

SEGUNDO PASO: Descargar el archivo frases.js

Ejemplo: Hacé clic sobre la imagen

<script language="javascript"> // Creado por Tk imax@samerica.com imagen1=new Image imagen1.src="imagen01.gif" imagen2=new Image imagen2.src="imagen02.gif" var i=1; function cambiar() { if (i == 1) { document.images['ejemplo'].src=imagen2.src i=2; } else { document.images['ejemplo'].src=imagen1.src; i=1; } } </script>  <img src="imagen1.gif" name="ejemplo" onMousedown="cambiar()">

Ejemplo: Pasar el mouse por encima de la imagen.

Carrito de compra

ejemplo:

Productos 1

Productos 2

Productos 3

Productos 4

Productos 5

Productos 6

<script LANGUAGE="JavaScript"> /* Copyright Reaz Hoque http://rhoque.com rhoque@rhoque.com This code can be used for non-profit use only if the copyright notice is kept. */ var called=false; var T_Price=0; var Line1_flag; var Line1_print=""; var Line2_flag; var Line2_print; var Line3_flag; var Line3_print; var Line4_flag; var Line4_print; var Line5_flag; var Line5_print; var Line6_flag; var Line6_print; function compute(form){ called=true; //-------Productos 1---------- if (form.Productline1[0].selected){ Line1_print= "Ninguno [$0]"; Line1_flag=0; } if (form.Productline1[1].selected){ Line1_flag =84.95; Line1_print="Producto 1 [$84.95]"; } else if (form.Productline1[2].selected){ Line1_flag =84.95; Line1_print="Producto 2 [$84.95]"; } else if (form.Productline1[3].selected){ Line1_flag =54.95; Line1_print="Producto 3 [$54.95]"; } else if (form.Productline1[4].selected){ Line1_flag =54.95; Line1_print="Producto 4 [$54.95]"; } else if (form.Productline1[5].selected){ Line1_flag =19.95; Line1_print="Producto 5 [$19.95]"; } //-------Productos 2---------- if (form.Productline2[0].selected){ Line2_flag=0; Line2_print="Ninguno [$0]"; } if (form.Productline2[1].selected){ Line2_flag=150; Line2_print="Producto 1 [$150]"; } if (form.Productline2[2].selected){ Line2_flag=250; Line2_print="Producto 2 [$250]"; } if (form.Productline2[3].selected){ Line2_flag=350; Line2_print="Producto 3 [$350]"; } //-------Productos 3----------- if (form.Productline3[0].selected){ Line3_flag=0; Line3_print="Ninguno [$0]"; } if (form.Productline3[1].selected){ Line3_flag=10; Line3_print="Producto 1 [$10]"; } if (form.Productline3[2].selected){ Line3_flag=20; Line3_print="Producto 2 [$20]"; } if (form.Productline3[3].selected){ Line3_flag=30; Line3_print="Producto 3 [$30]"; } //-------Productos 4------- if (form.Productline4[0].selected){ Line4_flag=0; Line4_print="Ninguno [$0]"; } if (form.Productline4[1].selected){ Line4_flag=100; Line4_print="Producto 1 [$100]"; } if (form.Productline4[2].selected){ Line4_flag=200; Line4_print="Producto 2 [$200]"; } if (form.Productline4[3].selected){ Line4_flag=300; Line4_print="Producto 3 [$300]"; } //-------Productos 5------- if (form.Productline5[0].selected){ Line5_flag=0; Line5_print="Ninguno [$0]"; } if (form.Productline5[1].selected){ Line5_flag=50; Line5_print="Producto 1 [$50]"; } if (form.Productline5[2].selected){ Line5_flag=60; Line5_print="Producto 2 [$60]"; } if (form.Productline5[3].selected){ Line5_flag=70; Line5_print="Producto 3 [$70]"; } //-------Productos 6------- if (form.Productline6[0].selected){ Line6_flag=0; Line6_print="Ninguno [$0]"; } if (form.Productline6[1].selected){ Line6_flag=75; Line6_print="Producto 1 [$75]"; } if (form.Productline6[2].selected){ Line6_flag=85; Line6_print="Producto 2 [$85]"; } if (form.Productline6[3].selected){ Line6_flag=95; Line6_print="Producto 3 [$95]"; } T_Price=Line1_flag+Line2_flag+Line3_flag+Line4_flag+Line5_flag+Line6_flag; form.T_Price.value=" $ "+ T_Price; } function print(form){ if(!called){ compute(form); } text = ("<HEAD><TITLE>'Costo Estimado'</TITLE></HEAD>"); text = (text +"<BODY BGCOLOR = '#FFFFFF' ><CENTER><B><FONT SIZE = 3><FONT COLOR=BLUE>Costo Estimado</FONT></FONT></B>"); text= (text +"<br></CENTER>"); text=(text+"<hr>"); text=(text+"<TABLE BORDER =0><TR VALIGN=Top><TD VALIGN=Top>"); text=(text+"<B>Producto 1:<BR>Producto 2: <BR>Producto 3: <BR>Producto 4: <BR>Producto 5: <BR>Producto 6:"); text=(text+"</B></TD><TD>") text=(text+"<B>"+ Line1_print+"<BR>"+ Line2_print+"<BR>"+ Line3_print+"<BR>"); text=(text+ Line4_print+"<BR>"+ Line5_print+"<BR>"+ Line6_print+"<BR>"); text=(text+"<TD></TR></TABLE><hr>"); text=(text+"<B><FONT COLOR=RED>Costo Total:</FONT>"+" $"+T_Price); text=(text+"</body></html>"); msgWindow=window.open("","displayWindow","toolbar=no,width=320,height=240,directories=no,status=no,scrollbars=no,resize=no,menubar=no") msgWindow.document.write(text) msgWindow.document.close() } </script>  <form method="post"> <table cellpadding="4" bgcolor="#EAE8E8"> <tr> <td><font face="Arial" size="2">Productos 1<br> <select name="Productline1" size="1"> <option selected value="Seleccione">Libros</option> <option value="Producto 1 [$84.95] ">Producto 1 [$84.95]</option> <option value="Producto 2 [$84.95] ">Producto 2 [$84.95]</option> <option value="Producto 3 [$54.95] ">Producto 3 [$54.95]</option> <option value="Producto 4 [$54.95] ">Producto 4 [$54.95]</option> <option value="Producto 5 [$19.95] ">Producto 5 [$19.95]</option> </select></font></td> <td><font face="Arial" size="2">Productos 2<br> <select name="Productline2" size="1"> <option selected value="CD-Roms">CD-Roms</option> <option value="Producto 1 [$150] ">Producto 1 [$150]</option> <option value="Producto 2 [$250] ">Producto 2 [$250]</option> <option value="Producto 3 [$350] ">Producto 3 [$350]</option> </select></font></td> <td><font face="Arial" size="2">Productos 3<br> <select name="Productline3" size="1"> <option selected value="Postales">Postales</option> <option value="Producto 1 [$10] ">Producto 1 [$10]</option> <option value="Producto 2 [$20] ">Producto 2 [$20]</option> <option value="Producto 3 [$30] ">Producto 3 [$30]</option> </select></font></td> </tr> <tr> <td><font face="Arial" size="2">Productos 4<br> <select name="Productline4" size="1"> <option selected value="Llaveros">Servicios</option> <option value="Producto 1 [$100] ">Producto 1 [$100]</option> <option value="Producto 2 [$200] ">Producto 2 [$200]</option> <option value="Producto 3 [$300] ">Producto 3 [$300]</option> </select></font></td> <td><font face="Arial" size="2">Productos 5<br> <select name="Productline5" size="1"> <option selected value="Software">Software</option> <option value="Producto 1 [$50] ">Producto 1 [$50]</option> <option value="Producto 2 [$60] ">Producto 2 [$60]</option> <option value="Producto 3 [$70] ">Producto 3 [$70]</option> </select></font></td> <td><font face="Arial" size="2">Productos 6<br> <select name="Productline6" size="1"> <option selected value="Hardware">Hardware</option> <option value="Producto 1 [$75] ">Producto 1 [$75]</option> <option value="Producto 2 [$85] ">Producto 2 [$85]</option> <option value="Producto 3 [$95] ">Producto 3 [$95]</option> </select></font></td> </tr> <tr> <td colspan="3"><table cellpadding="2"> <tr> <td><font size="1"><br> </font><input type="button" name="Price" value="Costo Total" onclick="compute(this.form)"><font size="1"> </font><input type="text" size="12" name="T_Price" value></td> <td valign="top"><font size="1"><br> </font><input type="button" name="Print_data" value="Ver Detalles" onclick="print(this.form)">  <input type="button" value="Enviar" onMouseup="javascript:alert('Esto es una prueba')"></td> </tr> <tr> <td></td> <td valign="top"></td> </tr> </table> </td> </tr> </table> </form>

Ver código fuente: Página actual Foros del Web

cuenta pogresiva

<script> var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") function countup(yr,m,d){ var today=new Date() var todayy=today.getYear() if (todayy < 1000) todayy+=1900 var todaym=today.getMonth() var todayd=today.getDate() var todaystring=montharray[todaym]+" "+todayd+", "+todayy var paststring=montharray[m-1]+" "+d+", "+yr var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1) difference+=" días" document.write("Este Sitio lleva "+difference+" en Internet desde su creación!") } //cambiar la fecha countup(2001,01,03) </script>

Cuenta regresiva

<script languaje="javascript"> //cambiar el texto var before="mi cumpleaños" var current="Hoy es mi cumpleaños!" var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") function countdown(yr,m,d){ var today=new Date() var todayy=today.getYear() if (todayy < 1000) todayy+=1900 var todaym=today.getMonth() var todayd=today.getDate() var todaystring=montharray[todaym]+" "+todayd+", "+todayy var futurestring=montharray[m-1]+" "+d+", "+yr var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1) if (difference==0) document.write(current) else if (difference>0) document.write("Faltan "+difference+" días para "+before) } //cambiar la fecha countdown(2002,2,10) </script>

Detecta el navegador que la persona está usando y la redirecciona a la página correspondiente.

El siguiente JavaScript evita que aparezca un mensaje de error al ejecutar un JS.

Ejemplo: Pasar el cursor por encima de las imágenes (funciona en IE).

<style type="text/css"> #im { FILTER: alpha(opacity=50) } </style> <script language="JavaScript1.2"> function high(which2) { theobject=which2; highlighting=setInterval("highlightit(theobject)",50); } function low(which2) { clearInterval(highlighting); which2.filters.alpha.opacity=50; } function highlightit(cur2) { if(cur2.filters.alpha.opacity<100) cur2.filters.alpha.opacity+=5 else if(window.highlighting) clearInterval(highlighting) } </script>  <img id="im" onmouseover="high(this)" onmouseout="low(this)">

maquina de escribir

<script language="JavaScript">  </script> <span id="layer1" style="position: absolute; left: 10px; top: 20px"></span>  <body onload="typeLayer()" onunload="clearTimeout(tID)">

Una manera muy entretenida de abrir una ventana popup.

<script language="JavaScript">  </script> <form> <input type="button" value="Abrir Ventana" onClick="inicio()"></p> </form>

<script LANGUAGE="JavaScript">  </script>  <form method="post" action="http://www.tu-sitio.com/cgi-bin/email.pl" onSubmit="return enviado()"> <div align="center"><center><table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="12%">Nombre: </td> <td width="88%"><input type="text" name="name" size="20"></td> </tr> <tr> <td width="12%">E-mail: </td> <td width="88%"><input type="text" name="email" size="20"></td> </tr> </table> </center></div><p><input type="submit" value="Enviar formulario!"></p> </form>

fecha

<script languaje="JavaScript"> var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado") var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre") document.write("<small><font color='000000' face='Arial'>"+dayarray[day]+" "+daym+" de "+montharray[month]+" de "+year+"</font></small>") </script>

Las imágenes cambian aleatoriamente al ingresar a la página. Mayor es el número de imágenes menor es la posibilidad de que se repitan. Ejemplo: Actualizar la página o volver a ingresar.

Podemos utilizar el tag <link> para imprimir un archivo.

Una muy buena forma de imprimir una página web. Lo que hace este javascript es detectar si el navegador del usuario soporta el método window.print()

Agrega un enlace del sitio a los favoritos del navegador. Adaptado para que funcione con IE y NS.

<script LANGUAGE="JavaScript"> function agregar(){ if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) { var url="http://www.tu-sitio.comr/"; var titulo="Nomnre del Sitio"; window.external.AddFavorite(url,titulo); } else { if(navigator.appName == "Netscape") alert ("Presione Crtl+D para agregar este sitio en sus Bookmarks"); } } </script>  <input type="button" value="Agregar a favoritos" onClick="javascript:agregar();">

La ventana del navegador se ajusta al tamaño de la pantalla al cargar la página web.

<script language="JavaScript1.2">  </script>

Un mensaje de bienvenida muy interesante.

<style type="text/css"> #supertext { position:absolute; left:0; top:0; visibility:hide; visibility:hidden; } </style>  <script language="JavaScript1.2"> // Script Original: Lloyd Hassell's // Mensaje var thecontent='<h2><font color="#0000FF">Depósito de JavaScripts!</font></h2>' // Tiempo de animación en milisegundos ('' = infinito) var hidetimer=7000; // Velocidad var BallSpeed = 10; var contentWidth; var contentHeight; var maxBallSpeed = 50; var xMax; var yMax; var xPos = 0; var yPos = 0; var xDir = 'right'; var yDir = 'down'; var superballRunning = true; var tempBallSpeed; var currentBallSrc; var newXDir; var newYDir; function initializeBall() { if (document.all) { xMax = document.body.clientWidth yMax = document.body.clientHeight document.all("supertext").style.visibility = "visible"; contentWidth=supertext.offsetWidth contentHeight=supertext.offsetHeight } else if (document.layers) { xMax = window.innerWidth; yMax = window.innerHeight; contentWidth=document.supertext.document.width contentHeight=document.supertext.document.height document.layers["supertext"].visibility = "show"; } setTimeout('moveBall()',400); if (hidetimer!='') setTimeout("hidetext()",hidetimer) } function moveBall() { if (superballRunning == true) { calculatePosition(); if (document.all) { document.all("supertext").style.left = xPos + document.body.scrollLeft; document.all("supertext").style.top = yPos + document.body.scrollTop; } else if (document.layers) { document.layers["supertext"].left = xPos + pageXOffset; document.layers["supertext"].top = yPos + pageYOffset; } animatetext=setTimeout('moveBall()',20); } } function calculatePosition() { if (xDir == "right") { if (xPos > (xMax - contentWidth - BallSpeed)) { xDir = "left"; } } else if (xDir == "left") { if (xPos < (0 + BallSpeed)) { xDir = "right"; } } if (yDir == "down") { if (yPos > (yMax - contentHeight - BallSpeed)) { yDir = "up"; } } else if (yDir == "up") { if (yPos < (0 + BallSpeed)) { yDir = "down"; } } if (xDir == "right") { xPos = xPos + BallSpeed; } else if (xDir == "left") { xPos = xPos - BallSpeed; } else { xPos = xPos; } if (yDir == "down") { yPos = yPos + BallSpeed; } else if (yDir == "up") { yPos = yPos - BallSpeed; } else { yPos = yPos; } } function hidetext(){ if (document.all) supertext.style.visibility="hidden" else if (document.layers) document.supertext.visibility="hide" clearTimeout(animatetext) } if (document.all||document.layers){ document.write('<span id="supertext"><nobr>'+thecontent+'</nobr></span>') window.onload = initializeBall; window.onresize = new Function("window.location.reload()"); } </script>

El siguiente JavaScript hace que una imagen se mueva al pasar el mouse por encima de la misma (funciona en IE).

Ejemplo:

<script language="JavaScript1.2"> var rector=3 var stopit=0 var a=1 function init(which){ stopit=0 shake=which shake.style.left=0 shake.style.top=0 } function rattleimage(){ if ((!document.all&&!document.getElementById)||stopit==1) return if (a==1){ shake.style.top=parseInt(shake.style.top)+rector } else if (a==2){ shake.style.left=parseInt(shake.style.left)+rector } else if (a==3){ shake.style.top=parseInt(shake.style.top)-rector } else{ shake.style.left=parseInt(shake.style.left)-rector } if (a<4) a++ else a=1 setTimeout("rattleimage()",50) } function stoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 } </script>  <img src="imagen.gif" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this)">

Una forma divertida de enviar un e-mail al mejor estilo Outlook Express. Ver ejemplo

<script LANGUAGE="JavaScript"> // Creado por Tk imax@samerica.com // Querés tener el Outlook adentro del navegador? <img src="//theme.webme.com/smiles/rolleyes.gif" border="0" width="15" height="15" alt="" /> function enviarEmail() { var para = Formulario.para.value; var cc = Formulario.cc.value; var cco = Formulario.cco.value; var asunto = Formulario.asunto.value; var cuerpo = Formulario.cuerpo.value; var mensaje = "mailto:" + para + "?cc=" + cc + "&bcc=" + cco + "&subject=" + escape(asunto) + "&body=" + escape(cuerpo); window.location = mensaje; } </script>

Ejemplo: Convertir en Página de inicio?

Este JavaScript permite abrir una ventana pantalla completa ver ejemplo

Pasar Variables 1

Para ver los datos ingresados hacé clic en "Vista previa"

<form type="get" action="prev2.htm"> <div align="left"><table border="1" bgcolor="#E8E8E8" cellspacing="0" cellpadding="0" width="250"> <tr> <td width="80"><small><font face="Arial">Nombre:</font></small></td> <td width="170"><input type="text" name="nombre" size="14"></td> </tr> <tr> <td width="80"><small><font face="Arial">Apellido:</font></small></td> <td width="170"><input type="text" name="apellido" size="14"></td> </tr> <tr> <td width="80"><small><font face="Arial">E-mail:</font></small></td> <td width="170"><input type="text" name="email" size="14"></td> </tr> <tr> <td bgcolor="#C0C0C0" width="80"> </td> <td bgcolor="#C0C0C0" width="170"><small><font face="Arial"><input type="submit" value="Vista previa"></font></small></td> </tr> </table> </div> </form>

<script LANGUAGE="JavaScript"> function getParams() { var idx = document.URL.indexOf('?'); var params = new Array(); if (idx != -1) { var pairs = document.URL.substring(idx+1, document.URL.length).split('&'); for (var i=0; i<pairs.length; i++) { nameVal = pairs[i].split('='); params[nameVal[0]] = nameVal[1]; } } return params; } params = getParams(); </script>  <script LANGUAGE="JavaScript"> nombre = unescape(params["nombre"]); apellido = unescape(params["apellido"]); email = unescape(params["email"]); document.write("Nombre = " + nombre + "<br>"); document.write("Apellido = " + apellido + "<br>"); document.write("E-mail = " + email + "<br>"); </script>

Pasar variables 2

Las variables pasan directamente a los cuadros de texto del formulario.

<form type="get" action="var2.htm"> <select size="1" name="libro"> <option value="Libro1">Libro1</option> <option value="Libro2">Libro2</option> <option value="Libro3">Libro3</option> </select> <select size="1" name="editorial"> <option value="Edit1">Edit1</option> <option value="Edit2">Edit2</option> <option value="Edit3">Edit3</option> </select> <input type="submit" value="Pasar variable"> </form>

<script LANGUAGE="JavaScript"> function getParams() { var idx = document.URL.indexOf('?'); var params = new Array(); if (idx != -1) { var pairs = document.URL.substring(idx+1, document.URL.length).split('&'); for (var i=0; i<pairs.length; i++) { nameVal = pairs[i].split('='); params[nameVal[0]] = nameVal[1]; } } return params; } params = getParams(); </script>  <form name="tk" onSubmit="alert('Esto es una prueba');"> </font></small><p><input type="text" name="texto1" size="20"></p> <p><input type="text" name="texto2" size="20"></p> <p><font face="Arial"><small><input type="submit" value="Enviar"></small></font></p> </form> <script LANGUAGE="JavaScript"> libro = unescape(params["libro"]); editorial = unescape(params["editorial"]); document.tk.texto1.value=libro document.tk.texto2.value=editorial </script>

Pasar variables 3

Pasar variables de una cuadro de texto a otro.

<script LANGUAGE="JavaScript">  </script>  <form ACTION METHOD="POST"> <table border="0"> <tr> <td><select multiple size="5" name="list1"> <option value="11"> item 1.1 </option> <option value="12"> item 1.2 </option> <option value="13"> item 1.3 </option> </select></td> <td><input type="button" value=" >> " onclick="move(this.form.list1,this.form.list2)" name="B1"><br> <input type="button" value=" << " onclick="move(this.form.list2,this.form.list1)" name="B2"> </td> <td><select multiple size="5" name="list2"> <option value="21"> item 2.1 </option> <option value="22"> item 2.2 </option> <option value="23"> item 2.3 </option> </select></td> </tr> </table> </form>

¿Cómo funciona? El nombre del password es el nombre de la página destino sin la extensión htm. De esta manera no se expone el password al ver el código fuente. A continuación un ejemplo: El password es 92s3j77e (al ingresarlo vas a ser redireccionado a la página 92s3j77e.htm)

El siguiente JavaScript redirecciona a los visitantes según la versión del plugin que tienen instalados. En caso de no encontrar el plugin los redireciona a una página web sin flash.

<script language="JavaScript">  </script>  <body onLoad="detectarflash()">

El siguiente JavaScript realiza una precarga de las imágenes ubicadas en la página web.

El siguiente JavaScript realiza una precarga de la imágenes mostrando una barra progresiva.

El siguiente JavaScript quita los frames de una página web.

redirecciona parte 1
El siguiente JavaScript redirecciona a los navegantes a otra página web.

redirecciona parte 2
El siguiente meta tag redirecciona a los navegantes a otra página web.

resolucion
Con este javascript los visitantes son redireccionados de acuerdo a la resolución de sus monitores.

<html> <head><script LANGUAGE="JavaScript"> function redireccionar() { var url640x480 = "http://www.tu-sitio.com/640x480"; var url800x600 = "http://www.tu-sitio.com/800x600"; var url1024x768 = "http://www.tu-sitio.com/1024x768"; if ((screen.width == 640) && (screen.height == 480)) window.location.href= url640x480; else if ((screen.width == 800) && (screen.height == 600)) window.location.href= url800x600; else if ((screen.width == 1024) && (screen.height == 768)) window.location.href= url1024x768; else window.location.href= url640x480; } </script> <title></title> </head> <body onLoad="redireccionar()"> </body> </html>

Scroll de noticias

<script language="JavaScript1.2"> // ancho var marqueewidth=150 // alto var marqueeheight=80 // velocidad var speed=1 // contenido var marqueecontents='<font face="Arial"><small>En el depósito de JavaScripts podrás encontrar aquellos códigos solicitados por los usuarios de los <a href="http//www.forosdelweb.com/">Foros del Web</a>.<p> </p>Si buscás otro script visitá la sección <a href="index.htm">Depósito de JavaScripts!</small></a></font>' if (document.all) document.write('<marquee direction="up" scrollAmount='+speed+' style="width:'+marqueewidth+';height:'+marqueeheight+'">'+marqueecontents+'</marquee>') function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers){ setTimeout("window.onresize=regenerate",450) intializemarquee() } } function intializemarquee(){ document.cmarquee01.document.cmarquee02.document.write(marqueecontents) document.cmarquee01.document.cmarquee02.document.close() thelength=document.cmarquee01.document.cmarquee02.document.height scrollit() } function scrollit(){ if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){ document.cmarquee01.document.cmarquee02.top-=speed setTimeout("scrollit()",100) } else{ document.cmarquee01.document.cmarquee02.top=marqueeheight scrollit() } } window.onload=regenerate2 </script>

Con este JavaScript podemos determinar que tipo de archivos se pueden subir (en este caso GIF y JPG)

título de la ventana 1

título de la ventana 2

<script language="JavaScript1.2"> // ******************************************************************* // script by drevil_nz, Michael Dillon, Christchurch New Zealand. // Permission granted to use this script provided this credit // remains intact. Visit my homepage www.chc.quik.co.nz/juggler/mikey.html // Script written for Internet Explorer 4.0+. // ******************************************************************* var message="Michael Dillon's dynamic title script" var message=message+" " i="0" var temptitle="" var speed="150" function titler(){ if (!document.all&&!document.getElementById) return document.title=temptitle+message.charAt(i) temptitle=temptitle+message.charAt(i) i++ if(i==message.length) { i="0" temptitle="" } setTimeout("titler()",speed) } window.onload=titler </script>

Validar formulario

Apellido

Nombre

Domicilio

(*) Ciudad

(*) Provincia

(*) Codigo Postal

(*) Pais

E-mail

Teléfono

(*) Fax

Empresa

(*) Dirección

(*) Teléfono

(*) Fax

(*) E-mail

Tarjeta de Credito

Nombre del Titular

Numero

Código de seguridad

(*) Fecha de vencimiento

<script LANGUAGE="JavaScript"> function Validar(form) { if (form.Nombre.value == "") { alert("Por favor ingrese su nombre"); form.Nombre.focus(); return; } if (form.Email.value == "") { alert("Por favor ingrese su dirección de e-mail"); form.Email.focus(); return; } if (form.Domicilio.value == "") { alert("Por favor ingrese su domicilio"); form.Domicilio.focus(); return; } if (form.Telefono.value == "") { alert("Por favor ingrese su número de teléfono"); form.Telefono.focus(); return; } if (form.Empresa.value == "") { alert("Por favor ingrese el nombre de su empresa"); form.Empresa.focus(); return; } if (form.NumeroTarjeta.value == "") { alert("Por favor ingrese los números de su tarjeta de crédito"); form.NumeroTarjeta.focus(); return; } if (form.Codigo.value == "") { alert("Por favor ingrese el código de su tarjeta de crédito"); form.Codigo.focus(); return; } if (form.NombreTitular.value == "") { alert("Por favor indique el nombre del titular de la tarjeta de crédito"); form.NombreTitular.focus(); return; } if (form.Email.value.indexOf('@', 0) == -1 || form.Email.value.indexOf('.', 0) == -1) { alert("Dirección de e-mail inválida"); form.Email.focus(); return; } form.submit(); } </script>

<form METHOD="post" ACTION="../cgi-bin/formulario.cgi"> <div align="center"><center><table border="0" width="100%"> <tr> <td width="20%" align="right"><font face="Arial" color="#000000"><small>Apellido</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Apellido" size="20"></font></td> <td width="20%" align="right"><div align="right"><p><font face="Arial" color="#000000"><small>Nombre</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Nombre" size="20"></font></td> </tr> <tr> <td width="20%" align="right"><font face="Arial" color="#000000"><small>Domicilio</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Domicilio" size="20"></font></td> <td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Ciudad</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Ciudad" size="20"></font></td> </tr> <tr> <td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Provincia</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Provincia" size="20"></font></td> <td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Codigo Postal</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="CodPost" size="20"></font></td> </tr> <tr> <td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Pais</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Pais" size="20"></font></td> <td width="20%" align="right"><font face="Arial" color="#000000"><small>E-mail</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Email" size="20"></font></td> </tr> <tr> <td width="20%" align="right"><font face="Arial" color="#000000"><small>Teléfono</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Telefono" size="20"></font></td> <td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Fax</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Fax" size="20"></font></td> </tr> <tr> <td width="20%" align="right"></td> <td width="30%"></td> <td width="20%" align="right"><font face="Arial" color="#000000">  </font></td> <td width="30%"></td> </tr> <tr> <td width="20%" align="right"><font face="Arial" color="#000000"><small>Empresa</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Empresa" size="20"></font></td> <td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Dirección</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="DireccionEmpresa" size="20"></font></td> </tr> <tr> <td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Teléfono</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="telefonoEmpresa" size="20"></font></td> <td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Fax</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="FaxEmpresa" size="20"></font></td> </tr> <tr> <td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) E-mail</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="EmailEmpresa" size="20"></font></td> <td width="20%" align="right"></td> <td width="30%"></td> </tr> <tr> <td width="20%" align="right"></td> <td width="30%"></td> <td width="20%" align="right"></td> <td width="30%"></td> </tr> <tr> <td width="20%" align="right"><font face="Arial" color="#000000"><small>Tarjeta de Credito</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><select name="Tarjeta" size="1"> <option value="Amex">Amex</option> <option value="Visa">Visa</option> <option value="Mastercard">Mastercard</option> <option value="Diners">Diners</option> </select></font></td> <td width="20%" align="right"><font face="Arial" color="#000000"><small>Nombre del Titular</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="NombreTitular" size="20"></font></td> </tr> <tr> <td width="20%" align="right"><font face="Arial" color="#000000"><small>Numero</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="NumeroTarjeta" size="20"></font></td> <td width="20%" align="right"><font face="Arial" color="#000000"><small>Código de seguridad</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="Codigo" size="5"></font></td> </tr> <tr> <td width="20%" align="right"><font face="Arial" color="#000000"><small>(*) Fecha de vencimiento</small></font></td> <td width="30%"><font color="#FFFFFF" face="Arial"><input type="text" name="VencimientoMes1" size="2"> / <input type="text" name="Vencimientoano1" size="2"></font></td> <td width="20%" align="right"></td> <td width="30%"></td> </tr> <tr> <td width="20%" align="right"></td> <td width="30%"></td> <td width="20%" align="right"></td> <td width="30%"></td> </tr> <tr> <td width="100%" align="center" colspan="4"><div align="center"><center><table border="0" width="100%" cellspacing="15" cellpadding="0"> <tr> <td width="100%"><div align="center"><center><p><font face="Arial" color="#000000"><small><input TYPE="button" VALUE="Enviar" onClick="Validar(this.form)"><input TYPE="reset"></small></font></td> </tr> </table> </center></div></td> </tr> </table> </center></div> </form>

Ejemplo: Abrir Ventana Pop Up