Javascript para tu pagina Web

• No permite el botón derecho y además te penaliza con 10 clicks

<script language="Javascript"> zaehler=0; function right(e) { if (navigator.appName == 'Netscape'){ if (e.which == 3 || e.which == 2){ alert("Aqui no puedes utilizar el botón derecho del mouse"); for(i=0;i!=zaehler;i++)alert("Ya te avisé, te penalizaré con \n "+(zaehler-i)+"\n clicks."); zaehler+=10; alert("¡La proxima vez que lo hagas será peor! www.sitiosargentina.com.art"); return false;}} if (navigator.appName == 'Microsoft Internet Explorer'){ if (event.button == 2 || event.button == 3){ alert("Aqui no puedes utilizar el botón derecho del mouse"); for(i=0;i!=zaehler;i++)alert("Ya te avisé, te penalizaré con \n "+(zaehler-i)+"\n clicks."); zaehler+=10; alert("¡La proxima vez que lo hagas será peor! www.sitiosargentina.com.ar"); return false;}} return true; } document.onmousedown=right; if (document.layers) window.captureEvents(Event.MOUSEDOWN); window.onmousedown=right; // --></script>

• Se abre una ventana al utilizar el botón derecho

<SCRIPT language=JavaScript> function right(e) { if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)) { a=window.open("https://www.sitiosargentina.com.ar/","WindowName","width=640,height=600,top=40,left=50,resizable=yes,scrollbars=yes,menubar=no,toolbar=no,status=no,location=no"); return false; } else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) { a=window.open("https://www.sitiosargentina.com.ar/","WindowName","width=640,height=600,top=40,left=50,resizable=yes,scrollbars=yes,menubar=no,toolbar=no,status=no,location=no"); return false; } return true; } document.onmousedown=right; window.onmousedown=right; </SCRIPT>

• Para webs sin frames, mantiene tu página en primer plano, y no puede estar en frames de otro "listillo"

<SCRIPT LANGUAGE="JavaScript"> <!--- Se esconde el codigo a navegadores sin JS if (window != window.top) top.location.href = location.href; // --> </SCRIPT>

• Variación del anterior

<SCRIPT LANGUAGE="Javascript"> <!--- if (parent.frames.length) top.location.href= document.location; // ---> </SCRIPT>

Personalización de la Web

• Para hacer la Página de Inicio

<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('https://www.sitiosargentina.com.ar');return false">Página de inicio</a>

• Añadir a Favoritos

<SCRIPT LANGUAGE="JavaScript"> <!-- function addBookmark() { if (window.external) external.AddFavorite("https://www.sitiosargentina.com.ar", "www.sitiosargentina.com.ar") else alert("Tu navegador no soporta esta caracteristica"); } // --> </SCRIPT>

• Para que al añadir a "Favoritos" te coja un icono (se tiene que colocar en el head) y aedmás tienes que subir un .ico a tu hosting.

<LINK REL="SHORTCUT ICON" HREF="http://www.tuservidor.com/iconos/nombreicono.ico">

• Cambiar las barras de scroll (colocar siempre en el style) (puedes hacer infinitas variaciones cambiando color, tamaño, etc)

<style> <!-- BODY { scrollbar-base-color : #000000; scrollbar-arrow-color : #FFFFFF; } .nav { color : #FFCC00; font-size : 8pt;} --> </style>

• Otro ejemplo:

<STYLE type=text/css>BODY { SCROLLBAR-FACE-COLOR: #333333; SCROLLBAR-HIGHLIGHT-COLOR: #444444; SCROLLBAR-SHADOW-COLOR: #111111; SCROLLBAR-3DLIGHT-COLOR: #333333; SCROLLBAR-ARROW-COLOR: #ffffce; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: black } </STYLE>

Escribir en el "Status" del Navegador y hacer mover el "Title"

• Que se vaya moviendo las palabras del status

<SCRIPT languague="JavaScript"> <!-- var cuenta=0 var texto=" Lo que te de la gana " function scrolltexto () { window.status=texto.substring (cuenta,texto.length)+ texto.substring(0,cuenta) if (cuenta <texto.length){ cuenta ++ }else{ cuenta=0 } setTimeout("scrolltexto()",150) } scrolltexto () //--> </SCRIPT>

• Te enseña la hora y el texto que quieras en la barra del status

<script language="JavaScript"> <!-- mensaje=" |======| .:www.sitiosargentina.com.ar :. " function hora() { var h = new Date(); window.status="|======| " + h.getHours() +":"+ h.getMinutes() +"" +mensaje ; window.setTimeout('hora()',100); } hora() //--> </script>

• Varias frases o texto desplanzadose por el status

<head> <SCRIPT> <!-- var ShowString = " " //La primera linea tiene que estar en blanco + "Aquí la frase 1 " //Puedes añadir mas frases, aparte de estas 3 + "Aquí la frase 2 " + "Aquí la frase 3 " + "Ejemplo de otra frase " var ShowWidth = 100 var ShowHead = 0 var ShowTail = ShowWidth var ShowLength = ShowString.length function Marquee () { var DisplayString if (ShowHead < ShowTail) DisplayString = ShowString.substring(ShowHead, ShowTail) else DisplayString = ShowString.substring(ShowHead, ShowLength) + ShowString.substring( 0, ShowTail) ShowHead = (ShowHead + 1 ) % ShowLength ShowTail = (ShowTail + 1 ) % ShowLength window.status = DisplayString TimerID = setTimeout("Marquee()", 100) //Cambia el numero para cambiar la velocidad } //--> </SCRIPT> </head>

• Escribir en la barra de estado (status) al pasar el mouse por encima (onmouseover)

<a href="mailto:info@sitiosargentina.com.ar?subject=Comentarios/Sugerencias" onMouseOver="window.status='[ contacta con el webmaster ]';return true"> el-brujo</a>

• Escribir en "Title" y hacer que se maya moviendo cada X segundos.

<SCRIPT LANGUAGE="JavaScript"> var txt=" www.sitiosargentina.com.ar - www.sitiosargentina.com.ar"; var espera=200; var refresco=null; function rotulo_title() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);} rotulo_title(); </SCRIPT>

Abrir Nuevas Ventanas (Facilidades Navegación)

• Que se abra una ventana al entrar en la web (se puede definir tamaño, barras, etc, etc, etc)

<SCRIPT language=Javascript> open('legal.htm','AVISOLEGAL',"toolbar=0,location=0,status=0,menubar=0,scrollbars=yes,resizable=yes,width=490,height=232");</SCRIPT>

• Abrir una ventana al apretar un enlace (también se puede definir tamaño, etc)

<script language="JavaScript"> <!-- function winopen(pagina,nombreventana) { myWin=open(pagina,nombreventana,'width=530,height=400,top=150,left=300,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,titlebar=no'); } //--> </script>

• Para llamar a la página (caso anteriror)

javascript:winopen('https://www.sitiosargentina.com.ar','www.sitiosargentina.com.ar')"

• Imprimir la página

<a href="javascript:window.print()">Imprimir</a>

• Copiar al portapapeles

<script language="Javascript"> <!-- //specify whether contents should be auto copied to clipboard (memory) //Applies only to IE 4+ //0=no, 1=yes var copytoclip=1 function HighlightAll(theField) { var tempval=eval("document."+theField) tempval.focus() tempval.select() if (document.all&©toclip==1){ therange=tempval.createTextRange() therange.execCommand("Copy") window.status="Contents highlighted and copied to clipboard!" setTimeout("window.status=''",1800) } } //--> </script> <a href="javascript:HighlightAll('form.fuente')">Copiar al Portapapeles</a>

• Función Confirmar (ok, cancel) si ok entras sino vuelve para atrás

<script language="JavaScript"> <!-- function checkAGE() { if (!confirm ("Bievenido a elhacker.net. Si quieres entrar apreta ok, sino Cancel. Fácil eh?")) history.go(-1);return " "} document.writeln(checkAGE()) // --> </script>

Mejoras Diseño

• Punto de mira que ocupa toda la pantalla (color verde)

<div id="leftright" style="width:expression(document.body.clientWidth-2)"></div><div id="topdown" style="height:expression(document.body.clientHeight-2)"></div> <script language="JavaScript1.2"> <!-- if (document.all&&!window.print){ leftright.style.width=document.body.clientWidth-2 topdown.style.height=document.body.clientHeight-2 } else if (document.layers){ document.leftright.clip.width=window.innerWidth document.leftright.clip.height=1 document.topdown.clip.width=1 document.topdown.clip.height=window.innerHeight } function followmouse1(){ //move cross engine for IE 4+ leftright.style.pixelTop=document.body.scrollTop+event.clientY+1 topdown.style.pixelTop=document.body.scrollTop if (event.clientX<document.body.clientWidth-2) topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1 else topdown.style.pixelLeft=document.body.clientWidth-2 } function followmouse2(e){ //move cross engine for NS 4+ document.leftright.top=e.y+1 document.topdown.top=pageYOffset document.topdown.left=e.x+1 } if (document.all) document.onmousemove=followmouse1 else if (document.layers){ window.captureEvents(Event.MOUSEMOVE) window.onmousemove=followmouse2 } function regenerate(){ window.location.reload() } function regenerate2(){ setTimeout("window.onresize=regenerate",400) } if ((document.all&&!window.print)||document.layers) //if the user is using IE 4 or NS 4, both NOT IE 5+ window.onload=regenerate2 //--> </script>

• Para que el cursor sea un punto de mira (en pequeñito)

<style type="text/css"> <!-- body { cursor: crosshair} --> </style>

• Te dice el dia, mes y año del PC

<script language="JavaScript"><!-- var hoy = new Date(); dia = hoy.getDate(); mes = hoy.getMonth(); ano = hoy.getYear() + 0000; if (mes == "0") nombremes = "<font color=#00FF00 size=2>Enero</font>"; else if (mes == "1") nombremes = "<font color=#00FF00 size=2>Febrero</font>"; else if (mes == "2") nombremes = "<font color=#00FF00 SIZE=2>Marzo</font>"; else if (mes == "3") nombremes = "<font color=#00FF00 SIZE=2>Abril</font>"; else if (mes == "4") nombremes = "<font color=#00FF00 SIZE=2>Mayo</font>"; else if (mes == "5") nombremes = "<font color=#00FF00 SIZE=2>Junio</font>"; else if (mes == "6") nombremes = "<font color=#00FF00 SIZE=2>Julio</font>"; else if (mes == "7") nombremes = "<font color=#00FF00 SIZE=2>Agosto</font>"; else if (mes == "8") nombremes = "<font color=#00FF00 SIZE=2>Septiembre</font>"; else if (mes == "9") nombremes = "<font color=#00FF00 SIZE=2>Octubre</font>"; else if (mes == "10") nombremes = "<font color=#00FF00 SIZE=2>Noviembre</font>"; else nombremes = "<font color=#00FF00 SIZE=2>Diciembre</font>"; document.write (dia); document.write (" de "); document.write (nombremes); document.write (" del "); document.write (ano); // --></script>

• Cerrar la ventana al cabo de X rato

<script language="javascript">setTimeout("self.close();",7000)</script>

• Botón Cerrar Ventana (también windows.self.close())

<input type="button" onclick="javascript:window.close()" value="Cerrar Ventana" style="font-family: Verdana; font-size: 8 pt; color: #000080; background-color: #C0C0C0; border-style: solid">

• Botón Atrás, Actualizar y Adelante

<input type="button" value="Atrás" onclick="history.back()" style="font-family: Verdana; font-size: 8 pt"> <input type="button" value="Actualizar" onclick="window.location.reload()" style="font-family: Verdana; font-size: 8 pt"> <input type="button" value="Adelante" onclick="history.forward()" style="font-family: Verdana; font-size: 8 pt">

• Cambiar el puntero por uno personalizado:

<!-- en el style --> BODY { cursor:url(elhacker.cur); } <!-- Elegir un puntero a nuestro gusto y guardar como cursor.cur -->

• Cambiar el puntero:

<!-- en un enlace --> <a href="#" style="cursor:help">enlace</a> <!-- saldrá el puntero de ayuda con un interrogante :) -->

Meta Tags

• Actualizar contenido cada X segundos o va hacia otra pagina en x segunddos (en el head)

<!-- se refressca, se actualiza en tantos segundos --> <meta http-equiv="refresh" content="0"> <!-- va a hacia otra pagina en tantos segundos --> <meta http-equiv="refresh" content="8;URL=https://www.sitiosargentina.com.ar">

• El navegador o el proxy no guarde la página web en caché

<META HTTP-EQUIV="pragma" content="no-cache"> <!--si guarde cache --> <META HTTP-EQUIV="pragma" content="cache">

• El navegador o el proxy no guarde la página web en caché en lenguaje PHP

<? header("Cache-Control: no-cache, must-revalidate"); ?>

• Otras Meta-Tags básicas

<META content="text/html; charset=windows-1252" http-equiv=Content-Type> <meta http-equiv="Content-Language" content="es"> <META NAME="title" CONTENT="www.sitiosargentina.com.ar"> <META Name="description" CONTENT="descripcion"> <META Name="keywords" CONTENT="palabras clave"> <meta http-equiv="Reply-to" content="info@sitiosargentina.com.ar"> <META HTTP-EQUIV="pragma" content="no-cache"> <META Name="revisit" CONTENT="15 days"> <META Name="robots" CONTENT="all">

Rotación Banners

• Rotación banners (permite poner tantos banners como quieras, permite definir texto, imagen origen, link de destino, alto y anchura de imagen)

<SCRIPT LANGUAGE="JavaScript"> <!-- Begin var how_many_ads = 3; var now = new Date() var sec = now.getSeconds() var ad = sec % how_many_ads; ad +=1; if (ad==1) { txt="Una de las mejores webs"; url="http://www.elhacker.net"; alt="e l h a c k e r . n e t"; banner="http://www.elhacker.net/banner.gif"; width="468"; height="60"; } if (ad==2) { txt="Informática y videojuegos"; url="http://www.espana.mercadolibre.com/"; alt="MercadoLibre.com"; banner="http://etc, etc"; width="468"; height="60"; } if (ad==3) { txt="MercadoLibre, donde compras y vendes de todo"; url="http://www.espana.mercadolibre.com/"; alt="MercadoLibre.com"; banner="http://"; width="468"; height="60"; } document.write('<center>'); document.write('<a href=\"' + url + '\" target=\"_blank\">'); document.write('<img src=\"' + banner + '\" width=') document.write(width + ' height=' + height + ' '); document.write('alt=\"' + alt + '\" border=0><br>'); document.write('<small>' + txt + '</small></a>'); document.write('</center>'); // End --> </SCRIPT>

• Banner aleatorio

<script language="JavaScript"> <!-- Hide this script from old browsers -- function create() { this.width = '' this.height = '' this.src = '' this.href = '' this.border = '' this.mouseover = '' } function random(n) { var js_mult1=3141 var js_mult2=5821 var js_m1=100000000 var js_m2=10000 var js_iseed=0 var js_iseed1=0 var js_iseed2=0 if (js_iseed == 0) { now = new Date() js_iseed = now.getHours() + now.getMinutes() * 60 + now.getSeconds() * 3600 } js_iseed1 = js_iseed / js_m2 js_iseed2 = js_iseed % js_m2 var tmp = (((js_iseed2 * js_mult1 + js_iseed1 * js_mult2) % js_m2) * js_m2 + (js_iseed2 * js_mult2)) % js_m1 js_iseed = (tmp + 1) % js_m1 return (Math.floor((js_iseed/js_m1) * n)) } var numberOfAds = 3 //number or ads you want to display ads = new Array() for(var i=1; i<=numberOfAds; i++) { ads[i] = new create() } ads[1].width = "468" ads[1].height = "60" ads[1].src = "http://www.txemaweb.com/imagenes/b-txwe2.gif" ads[1].href = "http://www.txemaweb.com" ads[1].border = "0" ads[1].mouseover = "Ven a TxemaWeb.com" ads[2].width = "468" ads[2].height = "60" ads[2].src = "http://www.txemaweb.com/imagenes/b-carrux.gif" ads[2].href = "http://www.txemaweb.com/carruxel" ads[2].border = "0" ads[2].mouseover = "Visita El CarruXel Erotico." var n = random(numberOfAds) n = (n==0) ? n+1 : n n = (n > numberOfAds) ? n-numberOfAds : n var image = ads[n] var ad = "" ad += '<a href="' + image.href + '" \n' ad += 'onMouseOver="self.status=\'' + image.mouseover + '\'\;return true" \n' ad += 'onMouseOut="self.status=\'\'"> \n' ad += '<img src="' + image.src + '" width=' + image.width ad += '\n height=' + image.height + ' border=' + image.border ad += '\n></a>' // -- End Hiding Here --> </script>

• Para llamar al banner

<script language="JavaScript"> <!-- Hide this script from old browsers -- document.write(ad) // -- End Hiding Here --> </script>

Cookies

• Mandar una cookie

<SCRIPT language=JavaScript> <!-- Begin Script // les damos 30 dmas de vida a las cookies var validez = 30; var caduca = new Date(); caduca.setTime(caduca.getTime() + (validez*24*60*60*1000)); function getCookie(name){ var cname = name + "="; var dc = document.cookie; if (dc.length > 0) { begin = dc.indexOf(cname); if (begin != -1) { begin += cname.length; end = dc.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin, end)); } } return null; } function setCookie(name, value, expires, path, domain, secure) { document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : "; expires=" + expires.toGMTString()) + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + ((secure == null) ? "" : "; secure"); } function Contador(info){ // Cuantas veces var cuenta = getCookie('Veces') if ( cuenta== null) { cuenta = 0; } else{ cuenta++; } setCookie ('Veces', cuenta, caduca); return cuenta+1; } function Cuando(info){ // Cuando me visitas var ahora = new Date() var tiempo = 0; tiempo = getCookie('Cuando'); tiempo = tiempo * 1; var ultimaVezFormateado = new Date(tiempo); // pasa de nzmero a fecha var intLastVisit = (ultimaVezFormateado.getYear() * 10000)+(ultimaVezFormateado.getMonth() * 100) + ultimaVezFormateado.getDate() var ultimaVezEnFecha = "" + ultimaVezFormateado; // se usan funciones substring var diaSemana = ultimaVezEnFecha.substring(0,3) var fechaMes = ultimaVezEnFecha.substring(4,11) var horaDia = ultimaVezEnFecha.substring(11,16) var anio = ultimaVezEnFecha.substring(23,25) var texto = diaSemana + ", " + fechaMes + " a las " +horaDia // lo muestra setCookie ("Cuando", ahora.getTime(), caduca) return texto; } // End Script -->

• Leer contenidos de la cookie

<SCRIPT language=JavaScript> <!-- var visitas = Contador(); if ( visitas == 1 ) { document.write("Esta es la primera vez que visitas elhacker.net "); Cuando(); } else document.write("Has visitado esta Web <b>" + visitas + "</b> veces. La última fue en <b>" + Cuando() +"</b>. ") //--> </SCRIPT>

• Lista de opciones (ahora le llaman "Navegación Rápida)

<table height="74"> <tr> <td class="c1" vAlign="top" width="19%" height="70"> <form> <table align="center" cellPadding="0" class="t1" width="116" height="86"> <tbody> <tr> <td align="left" bgColor="#000000" height="15" width="129"> <p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><font color="#FFFFFF"> <img border="0" src="images/flecha.gif" width="6" height="7"> </font><b><font color="#fdcf66">I n d e x </font></b><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF" size="2"><img border="0" src="images/flecha.gif" width="6" height="7"></font> </font><p><p><p></p> </td> </tr> <tr> <td height="61" width="129"> <div align="center"> <p align="left" style="word-spacing: 0; line-height: 100%; text-indent: 0; margin: 0"> <font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"> <select name="llista" size="1" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8 pt"> <option selected value="error.htm"><Selecciona></option> <option value="antivirus.htm">Antivirus</option> <option value="Buscadores1.htm">Buscadores</option> <option value="buscamp3.htm">Busca MP3</option> <option value="covers1.htm">Covers</option> <option value="criptografia.htm">Criptografía</option> <option value="cracks.htm">Cracks</option> <option value="chat2.html">Chat</option> <option value="dibujosms.htm">Dibujos SMS</option> <option value="divx.htm">DivX</option> <option value="dni.htm">DNI</option> <option value="emuladores.htm">Emuladores</option> <option value="encuesta.htm">Encuesta</option> <option value="formulario2.htm">Formulario</option> <option value="http://www.elhacker.net/foro.htm">Foro</option> <option value="fotos.htm">Fotos</option> <option value="grabadoras.htm">Grabadoras</option> <option value="Inet1.htm">Guía Internet</option> <option value="http://www.terra.es/personal3/fistror/hacking.htm">Hacking</option> <option value="Info.html">Info Browser</option> <option value="scripts1.htm">IRC Scripts</option> <option value="irc2.htm">IRC Utils</option> <option value="javascript.htm">JavaScript</option> <option value="juegos.htm">Juegos</option> <option value="guest.htm">Libro de Visitas</option> <option value="links.htm">Links</option> <option value="Linux.htm">Linux</option> <option value="email.htm">Lista Correo</option> <option value="lomejor.htm">Lo Mejor</option> <option value="melodias.htm">Melodías</option> <option value="gsm.htm">Mensajes SMS</option> <option value="noticias.htm">Noticias</option> <option value="orgasmo.htm">Orgasmo</option> <option value="/cgi-bin/birdcast.cgi">Recomendar</option> <option value="solicitudweb.htm">Redireccionador</option> <option value="reloj.htm">Reloj</option> <option value="remailer.htm">Re-Mailer</option> <option value="seguridad.htm">Seguridad</option> <option value="tarifas.htm">Tarifas</option> <option value="moviles2.htm">Telefonía</option> <option value="Textos1.htm">Textos</option> <option value="trivial.htm">Trivial</option> <option value="trucosvisual.htm">Trucos VBasic</option> <option value="trucoswin.htm">Trucos Win</option> <option value="harddisk.htm">Tu HD</option> <option value="votame.htm">Votame!</option> <option value="webcam.htm">WebCams</option> <option value="webmasters.htm">Webmasters</option> <option value="windows.htm">Windows</option> <option value="bsod.htm">Win vs Linux</option> <option value="juego.html">3 en Raya</option> </select> </font> </div> <font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF"> <div align="center"> <p align="left" style="word-spacing: 0; line-height: 100%; text-indent: 0; margin: 0"> </div> </font> <div align="center"> <p align="left" style="word-spacing: 0; line-height: 100%; text-indent: 0; margin: 0"> <font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"> <input name="Submit" onclick="top.location.href=this.form.llista.options[this.form.llista.selectedIndex].value" type="button" value=" - Vamos! - " style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8 pt"> </font> </div> </td> </tr> </tbody> </table> </form> </td> </tr> </table>

• Enviar un e-mail con un "Subject" (Asunto), con Body (Cuerpo del Mensaje), así como CC (Copia Oculta)

mailto:info@sitiosargentina.com.ar?subject=Comentarios/Sugerencias&body=aqui el cuerpo del mensaje

• Al apretar un link, que haga varias cosas a elegir.

<a href="pagina.htm" OnClick="funcion_javascript(),otra_funcion()">Ejemplo</a>

Validar Formularios

• Validar formularios (comprueba que el campo e-mail incluya la arroba (@)

<!-- para llamarlo --> <form method="post" action="http://www.tudominio.com/cgi-bin/formail.cgi" onSubmit="return validar(this.email.value)"> <!-- funcion --> <SCRIPT LANGUAGE="JavaScript"> function validar(direccion) { if (direccion.indexOf("@") != -1) return true; else { alert('Debes escribir una dirección de e-mail válida'); return false; } } </SCRIPT>

• Validar Formularios Completo (mira longitud del campo, si incluye carácteres prohibidos, la arroba, etc)

<!-- para llamarlo --> <form method="post" action="http://www.tudominio.com/cgi-bin/formail.cgi" onSubmit="return validar(this)"> <!-- funcion --> <script Language="JavaScript"><!-- function validar(formulario) { if (formulario.NOMBRE.value.length < 1) { alert("Escriba por lo menos 1 caracter en el campo \"nombre_usuario\"."); formulario.nombre_usuario.focus(); return (false); } var checkOK = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZÁÉÍÓÚabcdefghijklmnñopqrstuvwxyzáéíóú "; var checkStr = formulario.nombre_usuario.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_usuario\"."); formulario.nombre_usuario.focus(); return (false); } if (formulario.APELLIDO.value.length < 10) { alert("Escriba una URL correcta en el campo \"web_actual\"."); formulario.web_actual.focus(); return (false); } if ((formulario.EMAIL.value.indexOf ('@', 0) == -1)||(formulario.email.value.length < 5)) { alert("Debes escribir una dirección de e-mail válida en el campo \"email\"."); formulario.email.focus(); return (false); } return (true); } //--></script>

* Notas: El nombre del Formulario debe ser Formulario, y debes cambiar los campos NOMBRE, APELLIDO y EMAIL por los campos de tu formulario. Además incluye la función "on focus" que te lleva al campo que este mal

• Al apretar el botón derecho aparece un menu (poner en el head)

<STYLE> <!-- .skin0{ position:absolute; width:175px; border:2px solid white; background-color:#C0C0C0; font-family:Verdana; font-size: 10px; line-height:15px; cursor:default; visibility:hidden; } .menuitems{ padding-left:10px; padding-right:10px; } --> </style> <script language="JavaScript1.2"> var menuskin=0 var display_url=0 function showmenuie5(){ var rightedge=document.body.clientWidth-event.clientX var bottomedge=document.body.clientHeight-event.clientY if (rightedge<ie5menu.offsetWidth) ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth else ie5menu.style.left=document.body.scrollLeft+event.clientX if (bottomedge<ie5menu.offsetHeight) ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight else ie5menu.style.top=document.body.scrollTop+event.clientY ie5menu.style.visibility="visible" return false } function hidemenuie5(){ ie5menu.style.visibility="hidden" } function highlightie5(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="highlight" event.srcElement.style.color="white" if (display_url==1) window.status=event.srcElement.url } } function lowlightie5(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="" event.srcElement.style.color="black" window.status='' } } function jumptoie5(){ if (event.srcElement.className=="menuitems"){ if (event.srcElement.getAttribute("target")!=null) window.open(event.srcElement.url,event.srcElement.getAttribute("target")) else window.location=event.srcElement.url } } </script> <!--[if IE]> <div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()"> <div class="menuitems" url="noticias.htm" target="_self">- Noticias</div> <div class="menuitems" url="encuesta.htm" target="_self">- Encuesta</div> <div class="menuitems" url="sms.htm" target="_self">- Mensajes SMS</div> <div class="menuitems" url="email.htm" target="_self">- Lista de Correo</div> <hr> <div class="menuitems" url="http://www.elhacker.net/foro.htm" target="_self">- Foro</div> <div class="menuitems" url="chat2.html" target="_self">- Webchat</div> <hr> <div class="menuitems" url="/cgi-bin/birdcast.cgi" target="_self">- Recomendar</div> <div class="menuitems" url="formulario2.htm" target="_self">- Contactar</div> <div class="menuitems" url="bug.htm" target="_self">- ¿Algún fallo?</div> </div> <![endif]--> <script language="JavaScript1.2"> if (document.all&&window.print){ if (menuskin==0) ie5menu.className="skin0" else ie5menu.className="skin1" document.oncontextmenu=showmenuie5 document.body.onclick=hidemenuie5 } </script>

Mejoras Webmaster

• Hojas de Estilo (CSS) Guardar como un archivo *.css

A:link {text-decoration: none;} A:visited {text-decoration:none;} A:hover {text-decoration: underline; color="#FFFF00";} A:active {TEXT-DECORATION: none} BODY { scrollbar-base-color : #000000; scrollbar-arrow-color : #FFFFFF; } .nav { color : #FFCC00; font-size : 8pt;}

• Hojas de Estilo (Para llamarlo y siempre dentro del Head)

<head> <LINK REL=STYLESHEET TYPE="TEXT/CSS" HREF="elhackernet.css"> </head>

• Funciones JavaScript (Guardarlo en un archivo *.js)

function right(e) { var msg = " [ www.sitiosargentina.com.ar] "; if (navigator.appName == 'Netscape' && e.which == 3) { alert(msg); // Delete this line to disable but not alert user return false; } else if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) { alert(msg); // Delete this line to disable but not alert user return false; } return true; } document.onmousedown = right;

• Para llamar al JavaScript

<script language="JavaScript" src="ejemplo.js"></script>

• Última modificación automática (escribe automaticamente la fecha cuando lo guardas)

<script language="VBScript"> document.write "Este documento fue actualizado por última vez en: " document.write document.lastmodified </script>

Comprobaciones

• Algunas versiones de Netscape Navigator pueden provocar fallos si se recarga la página o se cambia de tamaño

<script language="JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); // --> </script>

• Mirar si el navegador del visitante tiene flash (si tiene haces una cosa, sino otra)

<script language="JavaScript"> <!-- function MM_checkPlugin(plgIn, theURL, altURL, autoGo) { //v4.0 var ok=false; document.MM_returnValue = false; with (navigator) if (appName.indexOf('Microsoft')==-1 || (plugins && plugins.length)) { ok=(plugins && plugins[plgIn]); } else if (appVersion.indexOf('3.1')==-1) { //not Netscape or Win3.1 if (plgIn.indexOf("Flash")!=-1 && window.MM_flash!=null) ok=window.MM_flash; else if (plgIn.indexOf("Director")!=-1 && window.MM_dir!=null) ok=window.MM_dir; else ok=autoGo; } if (!ok) theURL=altURL; if (theURL) window.location=theURL; } //--> </script> <!-- Y luego lo llamas en el body -->

Pavadas

• Texto que va cambiando de color

<script language="JavaScript"> <!-- function initArray() { for (var i = 0; i < initArray.arguments.length; i++) { this[i] = initArray.arguments[i]; } this.length = initArray.arguments.length; } // you may fill this colors array with your colors. // the script will rotate the links through these colors var colors = new initArray( "#0066FF", "#FF6600", "blue", "red", "purple", "black", "grey", "navy"); pause_time = .5; // in seconds link = 0; // starting color index (in colors array) for unvisited links vlink = 4; // starting color index (in colors array) for visited links function linkDance() { link = (link+1)%colors.length; vlink = (vlink+1)%colors.length; //alert("link "+link+"\r\nvlink "+vlink+"\r\nvlinkColor "+document.vlinkColor); document.linkColor = colors[link]; document.vlinkColor = colors[vlink]; setTimeout("linkDance();",pause_time*1000); } linkDance(); // --> </script>

• Un texto va siguiendo el puntero del ratón

<head> <style> .spanstyle { position:absolute; visibility:visible; top:-50px; font-size:9pt; font-family:Tahoma; font-weight:bold; color:blue; } </style> <script> var x,y var step=20 var flag=0 // Tienes que dejar un espacio al final de tu mensaje!!!!! var message="Tu mensaje va aqui... " message=message.split("") var xpos=new Array() for (i=0;i<=message.length-1;i++) { xpos[i]=-50 } var ypos=new Array() for (i=0;i<=message.length-1;i++) { ypos[i]=-50 } function handlerMM(e){ x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY flag=1 } function makesnake() { if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } } else if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } } var timer=setTimeout("makesnake()",30) } </script> </head>

• Terremoto (que la pantalla tiemble y se mueva)

<!-- para llamarlo con un botón--> <INPUT onclick=shake(40) type=button value=""Terremoto""> <SCRIPT language=JavaScript1.2> <!-- Begin function shake(n) { if (n==1) {document.body.bgColor = "#0000DA"; } else {document.body.bgColor = "#FF8C00" } if (self.moveBy) { for (i = 15; i > 0; i--) { for (j = n; j > 0; j--) { self.moveBy(0,i); self.moveBy(i,0); self.moveBy(0,-i); self.moveBy(-i,0); } } } } // End --> </SCRIPT>

• Cualquier imagen va moviéndose por la pantalla

<script language="JavaScript"> <!-- // number of time you want it to pop var test=0; var MAXHITS = 100000; var cookiename= "2208749"; var nHits = eval(getCookie(cookiename)); // get current count var expdate = new Date(); expdate.setTime(expdate.getTime() + (10 * 24 * 60 * 60 * 1000)); // setCookie function setCookie (name, value, expires) { if (!expires) expires = new Date(); document.cookie = name + "=" + escape (value) + "; expires=" + expires.toGMTString() + "; path=/"; } // number of page hits so far stored in cookie nHits += 1; setCookie(cookiename, nHits, expdate); // getCookie function getCookie (name) { var dcookie = document.cookie; var cname = name + "="; var clen = dcookie.length; var cbegin = 0; while (cbegin < clen) { var vbegin = cbegin + cname.length; if (dcookie.substring(cbegin, vbegin) == cname) { var vend = dcookie.indexOf (";", vbegin); if (vend == -1) vend = clen; return unescape(dcookie.substring(vbegin, vend)); } cbegin = dcookie.indexOf(" ", cbegin) + 1; if (cbegin == 0) break; } return null; } //** AOL aol_checkjd='Mozilla/4.61 [en] (WinNT; I)'; var ableToPop = true; if(aol_checkjd.indexOf("AOL") > 0) { ableToPop = false; } if (nHits > MAXHITS) { ableToPop = false; } //** browser ** bName = navigator.appName; bVer = parseInt(navigator.appVersion); version="n2"; if (bName == "Netscape" && bVer == 2) version = "n2"; if (bName == "Netscape" && bVer >= 3) version = "n3"; if (bName == "Microsoft Internet Explorer" && bVer >= 2) version = "e3"; if (bName == "Microsoft Internet Explorer" && bVer >= 4) version = "e4"; if ( version == "n2" || version == "e3" ) ableToPop = false; if (navigator.appName.indexOf("WebTV") > -1 ) ableToPop=false; if ( ableToPop ) { if (nHits==null) { setCookie (name, 1); var test=1;comenzar(); } else { if (nHits<=MAXHITS) { setCookie (name, ++nHits); var test=1; comenzar(); } } } var ns = (document.layers)? true:false; var ie = (document.all)? true:false; var puntox = 0; var puntoy = 0; var posx; var posy; function mover(x,y) { if (ns) { document.layers['mierda'].left = x; document.layers['mierda'].top = y; } else { document.all('mierda').style.posLeft = x; document.all('mierda').style.posTop = y; } } function destino() { puntox = puntobueno(600); puntoy = puntobueno(400); } function movimiento() { if (ns) { posx = document.layers['mierda'].left ; posy = document.layers['mierda'].top; } else { posx = document.all('mierda').style.posLeft; posy = document.all('mierda').style.posTop; } auxx=posx; auxy=posy; if ( (puntox-posx)>0 ) { auxx = posx + 1; } else { if ((puntox-posx)<0) { auxx = posx - 1; } } if ( (puntoy-posy)>0 ) { auxy = posy + 1; } else { if ((puntoy-posy)<0) { auxy = posy - 1; } } mover(auxx,auxy); } i=0; function comenzar() { if (!llegada()) { movimiento(); setTimeout('comenzar()',10); } else { destino(); setTimeout('comenzar()',10); } } function llegada() { if ( (posx==puntox) && (posy==puntoy) ) { return true; } else { return false; } } function puntobueno (coord) { valido = false; while (!valido) { punto = parseInt(Math.random() * 1000); if (punto<coord) { valido = true; } } return punto; } destino(); //--> </script> <!-- Inicio capa de noticias que se mueve --> <div id="mierda" style="position: absolute; left: 100; top: 242; width: 116; height: 58; z-index: 1"> <script> if (test) { document.write('<a href="noticias.htm" target="_blank"><img src="noticias.gif" border="0"></a>'); } </script>

Efecto Nieve (van cayendo copos de nieve)

<script> <!-- Original: Altan (snow@altan.hr) --> <!-- Web Site: http://www.altan.hr/snow --> <!-- Smaller flakes, subtle snowfall variables, code beautifcation and makeSnow function by NoSLZZP --> var no = 5; // snow number var speed = 15; // smaller number moves the snow faster var snowflake = "dot.gif"; var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 400, doc_height = 500; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = 500; doc_height = 500; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ns4up) { // set layers if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(snowflake + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(snowflake + "\" border=\"0\"></layer>"); } } else if (ie4up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx[i] += stx[i]; document.all["dot"+i].style.pixelTop = yp[i]; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowIE()", speed); } if (ns4up) { snowNS(); } else if (ie4up) { snowIE(); } </script> <!-- Falta la imagen del copo de nieve, consiguela en http://www.altan.hr/snow -->

HTML Dinámico

• Efectos DHTML

<META http-equiv="Page-Enter" content="RevealTrans (Duration=3, Transition=23)"> Explicación: Page-Enter indica que el efecto sucederá cuando alguien entre en la pagina. También puede indicarse en su lugar Page-Exit y entonces la animación sucederá cuando se abandone la pagina. (Esto es mas odioso todavía si cabe... pues si nos vamos a otro sitio, puede parecer que la transición la tiene de entrada el nuevo sitio y no el que abandonamos) Duration=X indica la duración del efecto. X en segundos. Ponga 31536000 y la transición durara un año. Transition=Y indica el efecto a realizar. Hay 23 diferentes mas un valor para aleatorio.

• Diferentes Tipos

 Los diferentes efectos (Y) son los siguientes:

[ Consejos ]

 Todos estos recursos son gentileza de elhacker.net