martes, 2 de julio de 2013

Muchos trucos Javascript y HTML para tu web!

Muchos trucos Javascript y HTML para tu web!


Redireccionar tu web: 

<SCRIPT LANGUAGE="JavaScript"> 
location.href='PAGINA A LA QUE SERA REDIRECCIONADA'; 
</SCRIPT>








Abrir página en un PopUp 

<script language='JavaScript'>window.open('PAGINA QUE QUERES QUE SE ABRA EN UN POPUP', 'geoflotante', '');</script>


No dejar seleccionar el texto de nuestra Web: 

Con este código vamos a impedir que los visitantes seleccionen el texto de nuestra página para luego copiarlo a otro lado. 

<script language="Javascript"> 
<!-- Begin 
function disableselect(e){ 
return false 

function reEnable(){ 
return true 

document.onselectstart=new Function ("return false" 
if (window.sidebar){ 
document.onmousedown=disableselect 
document.onclick=reEnable 

// End --> 
</script>







Horas restantes para finalizar el día: 

Con este código insertamos un pequeño relojito que indica la cuenta regresiva de las horas, minutos y segundos que faltan para finalizar el día. 


<p>El reloj...</p> 
<form name="Reloj"> 
<input type="text" size=7 name="tiempo" value="mm:hh:ss" title="Tiempo restante para finalizar el día"> 
<script language="JavaScript"> 
<!-- 
var tiempoAtras; 

updateReloj(); 
function updateReloj() { 
var tiempo = new Date(); 
var hora = 23-tiempo.getHours(); 
var minutos = 59-tiempo.getMinutes(); 
var segundos = 59-tiempo.getSeconds(); 

tiempoAtras= (hora < 10) ? hora :hora; 
tiempoAtras+= ((minutos < 10) ? ":0" : ":" + minutos; 
tiempoAtras+= ((segundos < 10) ? ":0" : ":" + segundos; 

document.Reloj.tiempo.value = tiempoAtras; 

setTimeout("updateReloj()",1000); 

//--> 
</script> 







Recomendar Pagina: 

Con este código podemos hacer que si a un visitante le gustó nuestra Web, la recomiende a un amigo escribiendo su dirección de correo electrónico en la casilla, al hacer click en "Recomendar esta Web" se envía un mensaje de correo con el asunto "Pienso que te puede interesar esta página..." y en el cuerpo del mensaje aparece la dirección completa donde se encuentra el código y el título de la misma. 

<form name="eMailer"> 
ENVÍA ESTA PÁGINA A UN AMIGO 
<br> 
Indica su e-mail: 
<br> 
<input type="text" name="address" size=25> 
<br> 
<input type="button" value="Recomendá esta Web!" onClick="mailThisUrl();"> 
</form> 
<script language="JavaScript1.2"> 
var good; 
function checkEmailAddress(field) { 
// the following expression must be all on one line... 
var goodEmail = field.value.match(/b(^(S+@).+((.com)|(.net)| 
(.edu)|(.mil)|(.gov)|(.org)|(..{2,2}))$)b/gi); 
if (goodEmail){ 
good = true 
} else { 
alert('Por favor introduce un e-mail valido') 
field.focus() 
field.select() 
good = false 


u = window.location; 
m = "Pienso que te puede interesar esta página..."; 
function mailThisUrl(){ 
good = false 
checkEmailAddress(document.eMailer.address) 
if (good){ 
// the following expression must be all on one line... 
window.location = "mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+" "+u; 


</script>










Crear un Formulario o Libro de Visitas:


Con este código podemos crear un formulario para que complete el visitante. O también un libro de visitas, luego que el visitante apriete el botón "enviar", los datos serán enviados a tu casilla de correo. 

<H2>Libro de visitas de www.TU WEB.com</H2> 
<FORM ACTION="mailto:tunombre@tuservidor.com" METHOD="post"> 

<TABLE> 

<TD ALIGN=RIGHT>Nombre:</TD> 
<TD><INPUT type="text" size=36 name="nombre"></TD> 
<TR><TD ALIGN=RIGHT>Direccion E-mail:</TD> 
<TD><INPUT type="text" size=36 name="direccion"></TD> 
<TR><TD ALIGN=RIGHT>como llegaste hasta esta pagina?</TD> 
<TD><INPUT type="text" size=36 name="procedencia"></TD> 
<TR><TD ALIGN=RIGHT>Tus comentatios:</TD> 
<TD><TEXTAREA rows=5 cols=30 name="comentarios"></TEXTAREA></TD> 

</TABLE> 










Cuadro explicativo de los enlaces: 

Sorprendé a tus visitantes con este asombroso truco. Al pasar el mouse sobre el link, aparece la explicación de ese link en un cuadro con la cantidad de palabras que queramos poner. Solo tenés que reemplazar mis direcciones por las tuyas, y el texto deseado por el tuyo. 


<p> 
<script language="JavaScript"><!-- 
function escribe(frase){document.desplaza.cuadro.value=frase; } 
// --></script> 
</p> 
<table border="0"> 
<tr> 
<td width="200"><p align="center"><strong>Opciones.</strong></p> 

<p><a href="http://www.TUWEB.com" 
onmouseover="escribe(' Página principaln ----------------nn Cuando hagas Click en este enlace irás directamente a la página de inicio de mi web');">Página 
principal</a><br> 
<a href="#" 
onmouseover="escribe(' Trucos PCn -----------nn Este enlace te llevará a la página de Trucos PC en la que podés encontrar muchos más trucos interesantes para realizar e incluir en tus páginas web');">Trucos PC</a><br> 
<a href="#" 
onmouseover="escribe(' Glosarion -------------- nn Diccionario de Términos Informáticos. Enterate el significado de esas palabras de computación que decís todos los días pero que no sabés exactamente qué significa.');">Glosario</a><br> 
</p> 
</td> 
<td><form name="desplaza"> 
<p><textarea name="cuadro" rows="8" cols="30" 
wrap="physical"></textarea></p> 
</form> 
</td> 
</tr> 
</table> 
<INPUT type="reset" value="Borrar todo"> <INPUT type="submit" value="Enviar"> 

</FORM>









Insertar un sonido o música de fondo: 

Si quieren que los visitantes escuchen una canción mientras visitan la Web, o simplemente recibirlos con una melodía estilo presentación, este es el código que estabas buscando. Solo tenés que guardar el sonido en el directorio raíz de tu servidor e insertar el siguiente código html: 

<BGSOUND SRC="sonido.mid" LOOP=none> 
<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">


Se recomienda usar sonidos en formato "midi" que son los de menor peso.
 

Crear un link para download: 

Si queremos poner archivos para que los visitantes los puedan descargar a sus computadoras, solo debemos subir ese archivo a nuestro servidor e insertar en nuestra Web el siguiente código HTML: 

<a href="ejemplo.exe">Descripción del enlace </a>


No existe un comando que inicie la descarga. Lo que sucede es que, siempre que aparece un tipo de archivo no reconocido por el navegador, este comienza a descargarlo automáticamente. Ejemplo: Si el navegador no logra abrir un archivo "zip" (compactado), inicia la descarga automáticamente. 








Transformar el cursor en una mira: 

Transformá la clásica flechita de Windows en una mira de disparo. 

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








Comentario sobre un link en la barra de estado: 

Al pasar el mouse sobre el link deseado, veremos en la barra de estado un comentario sobre éste. Por ejemplo posicionen el mouse sobre Pauluk Computación y vean en la barra de estado. (para verlo bien en ésta página pasen el mouse varias veces, ya que hay otro código parecido que lo obstruye). 

<a href="http://www.TUWEB.com" 
onmouseout="window.status=''" 
onmouseover="window.status='Acá aparece el mensaje que quieras';return true"> 
Pauluk Computación</a>









Establecer una página como inicio: 

Este código html te sirve para crear un link para que el visitante pueda hacer que tu página sea la de inicio de su computadora. Con solo hacer clic sobre el link creado, tu página se iniciará automáticamente cada vez que esa persona se conecte a Internet. 

<A class=chlnk style=FONT-WEIGHT:bold;CURSOR:hand; 
COLOR:#004080;font-family:Verdana#onclick= 
"this.style.behavior='url(#default#homepage)'; 
this.setHomePage('http://www.TUWEB.com');"> 
<FONT face=Arial color=#000000 size=-2><U> 
Establecer como página de inicio</U></FONT></A>









Abrir un Link en una Ventana Nueva: 

( target="_blank" ) 

Cuando tenemos Links en nuestras páginas y alguien hace clic sobre ellos, automáticamente se abre esa dirección en nuestra ventana. Con este truco podemos hacer que al hacer clic sobre un determinado Link, esta dirección se abra en una ventana nueva, quedando la nuestra también abierta: 

<a href="http://www.TUWEB.com" target="_blank">Nombre de enlace</a>









Hora y texto en la barra de estado: 

Con este truco, podemos hacer que aparezca en la barra de estado la hora de la PC que entra a nuestra Web y poner el texto que queramos. 

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

hora() 
//--> 
</script>










Página protegida por clave: 

Este es un excelente recurso. Podés proteger tus páginas con una clave. Así podés definir exactamente quienes entrarán a tu página. No tenés que preocuparte por configuraciones. Es muy sencillo: la clave siempre será el nombre de tu página sin la extensión .htm, es decir, si la página tiene el nombre de "ejemplo.htm", la clave será "ejemplo". ¿Ves que fácil?. 

Para tener este recurso en tu sitio debes incluir un código en la página de "entrada" en donde el visitante ingresará la clave, y enviar a tu sitio el archivo de la página que será cargada. 



<Form name="frm"> 
<center> 
<Script Language="JavaScript"> 
<!-- 
// 
function loadpage(){ 
var psj=0; 
newwin = window.open(document.frm.pswd.value + ".htm" 

//--> 
</script> 
Ingresa tu clave: 
<input 
type="password" name="pswd" size=20> 
</center> 
<center> 
<p> 
<input type="button" value="Entra" 
onClick="loadpage()" name="button"> 
&nbsp;</p> 
</center> 
</form> 










Cambiar el color de la barra de desplazamiento: 

Con éste código van a conseguir cambiar el clásico color gris de la barra de desplazamiento de la derecha y abajo por el color que quieran. Para cambiar de colores, cambien el número 000000 por otros, cada color tiene su número, pero la lista es muy larga, así que prueben con los número que ya van a encontrar el deseado. 

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










Poniendo fecha en tu sitio: 

Aprendé a incluir la fecha en tu sitio sin necesidad de actualizarla cada día. Sólo tenés que usar un JavaScript que automáticamente exhibirá la fecha del día en tu página cada vez que ésta se abra. 

No tenés que preocuparte con ninguna configuración. Sólo tenés que copiar y pegar el código en tu página. 



<script language="JavaScript"> 
<!-- 
mydate = new Date(); 
myday = mydate.getDay(); 
mymonth = mydate.getMonth(); 
myweekday= mydate.getDate(); 
weekday= myweekday; 

if(myday == 0) 
day = " Domingo, " 

else if(myday == 1) 
day = " Lunes, " 

else if(myday == 2) 
day = " Martes, " 

else if(myday == 3) 
day = " Miércoles, " 

else if(myday == 4) 
day = " Jueves, " 

else if(myday == 5) 
day = " Viernes, " 

else if(myday == 6) 
day = " Sábado, " 

if(mymonth == 0) 
month = "Enero " 

else if(mymonth ==1) 
month = "Febrero " 

else if(mymonth ==2) 
month = "Marzo " 

else if(mymonth ==3) 
month = "Abril " 

else if(mymonth ==4) 
month = "Mayo " 

else if(mymonth ==5) 
month = "Junio " 

else if(mymonth ==6) 
month = "Julio " 

else if(mymonth ==7) 
month = "Agosto " 

else if(mymonth ==8) 
month = "Setiembre " 

else if(mymonth ==9) 
month = "Octubre " 

else if(mymonth ==10) 
month = "Noviembre " 

else if(mymonth ==11) 
month = "Diciembre " 

document.write("<font face=arial, size=1>"+ day); 
document.write(myweekday+" de "+month+ "</font>"
// --> 
</script>










Mensaje de bienvenida: 

Con este recurso personalizás tu sitio para el visitante. Al entrar, el visitante verá un espacio para ingresar su nombre y un mensaje que dice "Hola, Fulano". 

Copiá el siguiente código y pégalo donde quieras que aparezca el mensaje: 



<Script language="JavaScript"> 
mensagem = prompt("Por favor, ingresa tu nombre",''); 
if (mensagem==null) { 
document.write("¡Hola, visitante!" 
}else{ 
if (mensagem=='') { 
document.write("<b><font face=arial size=2 color=#000000>¡Hola, visitante!</font></b>" 
}else{ 
document.write("<b><font face=arial size=2 color=#000000>¡Hola"+mensagem+"! Bienvenido a mi sitio</font></b>"


</script>










Atrás y Adelante: 

Atrás: 

<a href="javascript:history.go(-1)">Atrás </a>


Adelante: 


<a href="javascript:history.go(1)">Adelante</a>



Imprimir pagina actual: 


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










Barra de estado fija: 

Podés colocar la palabra o el mensaje que quieras en la barra de estado de tu sitio y mantenerlo fijo. De esta forma tu sitio quedará mucho más personalizado, además de contar con otras ventajas. Por ejemplo: el visitante no verá la dirección del enlace al que está apuntando, sólo el mensaje definido por vos. 



<Script language="JavaScript"> 
statuss(); 
function statuss() 

window.status = "www.TUWEB.com - Un Sitio. Muchas Opciones."; 
setTimeout("statuss()", 1); 

</script>












Detectar el navegador: 

Esto sirve para comprobar el navegador que se está usando, por si queremos crear una página para Netscape y otra para Internet Explorer: 



<script language="JavaScript"> 

<!-- 

function esIE30(){ 

var browserType=navigator.userAgent; 

if (browserType.indexOf("MSIE"==-1) 

return false; 

else 

return true; 





<!-- Cargar la página según el explorador --> 

function cargar(){ 

if (esIE30()) 

window.location.href="indice_ie.htm"; 

else 

window.location.href="indice_netscape.htm"; 



//--> 

</script>