Sunteți pe pagina 1din 46

TUTORIALES

LIC. FIDEL ANGEL HERNANDEZ CRUZ

2006

TODO HTML TRUCOS, DATOS, ETC

ANGELITO WEB 1
TUTORIALES DE PROGRAMACION
Redireccionar una pgina:
Si tens una direccin larga, y los servidores que te dan direcciones cortas no tienen buena
capacidad de almacenamiento o de taza de transferencia de datos, con este cdigo pods hacer
que al escribir una direccin se abra otra, solo tens que insertar este cdigo en el index.html del
dominio corto poniendo tu direccin actual donde est en verde:

<HTML>
<HEAD>
<TITLE>Redireccionado por www.CheNico.com</TITLE>
<SCRIPT LANGUAGE="JavaScript">
location.href='http://www.CheNico.com';
</SCRIPT>
</HEAD>
<BODY>

Abrir una Web en Pop Up:


Con este cdigo vamos a hacer que al entrar en nuestra pgina automticamente se abra otra,
ej. otra Web nuestra, una seccin que queremos mostrar, una publicidad, etc.

<script language='JavaScript'>window.open('http://www.chenico.com', 'geoflotante',


'');</script>

No dejar seleccionar el texto de nuestra Web:


Con este cdigo vamos a impedir que los visitantes seleccionen el texto de nuestra pgina 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 da:

ANGELITO WEB 2
TUTORIALES DE PROGRAMACION
Con este cdigo insertamos un pequeo relojito que indica la cuenta regresiva de las horas,
minutos y segundos que faltan para finalizar el da.

<body>
<p>El reloj...</p>
<form name="Reloj">
<input type="text" size="7" name="tiempo" value="mm:hh:ss" title="Tiempo
restante para finalizar el da">
<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>
</form>
</body>

Recomendar Pagina:
Con este cdigo podemos hacer que si a un visitante le gust nuestra Web, la recomiende a un
amigo escribiendo su direccin de correo electrnico en la casilla, al hacer click en "Recomendar
esta Web" se enva un mensaje de correo con el asunto "Pienso que te puede interesar esta
pgina..." y en el cuerpo del mensaje aparece la direccin completa donde se encuentra el cdigo
y el ttulo de la misma.

<form name="eMailer">
ENVA ESTA PGINA 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) {

ANGELITO WEB 3
TUTORIALES DE PROGRAMACION
// 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 pgina...";
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 cdigo podemos crear un formulario para que complete el visitante. O tambin un libro
de visitas, luego que el visitante apriete el botn "enviar", los datos sern enviados a tu casilla de
correo.

<H2>Libro de visitas de www.CheNico.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>

<INPUT type="reset" value="Borrar todo"> <INPUT type="submit" value="Enviar">

</FORM>

ANGELITO WEB 4
TUTORIALES DE PROGRAMACION
Cuadro explicativo de los enlaces:
Sorprend a tus visitantes con este asombroso truco. Al pasar el mouse sobre el link, aparece la
explicacin de ese link en un cuadro con la cantidad de palabras que queramos poner. Solo tens
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.CheNico.com"
onmouseover="escribe(' Pgina principal\n ----------------\n\n Cuando hagas Click en
este enlace irs directamente a la pgina de inicio de mi web');">Pgina
principal</a><br>
<a href="http://usuarios.lycos.es/pauluk/trucosprin.htm"
onmouseover="escribe(' Trucos PC\n -----------\n\n Este enlace te llevar a la pgina
de Trucos PC en la que pods encontrar muchos ms trucos interesantes para realizar e
incluir en tus pginas web');">Trucos PC</a><br>
<a href="http://usuarios.lycos.es/pauluk/GLOSARIO.HTM"
onmouseover="escribe(' Glosario\n -------------- \n\n Diccionario de Trminos
Informticos. Enterate el significado de esas palabras de computacin que decs todos
los das pero que no sabs 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>

Insertar un sonido o msica de fondo:


Si quieren que los visitantes escuchen una cancin mientras visitan la Web, o simplemente
recibirlos con una meloda estilo presentacin, este es el cdigo que estabas buscando. Solo tens
que guardar el sonido en el directorio raz de tu servidor e insertar el siguiente cdigo 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:

ANGELITO WEB 5
TUTORIALES DE PROGRAMACION
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 cdigo
HTML:

<a href="ejemplo.exe">Descripcin 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 automticamente.
Ejemplo: Si el navegador no logra abrir un archivo "zip" (compactado), inicia la descarga
automticamente.

Subrayar un Link al pasar el mouse:


Con este cdigo podemos lograr ese tan conocido efecto que al pasar el mouse sobre un link, este
se subraye. Podemos hacer que tenga un color antes de visitar el link, y que tenga otro una vez
visitado.

<STYLE type="text/css">
<!--
A:link {COLOR: red; TEXT-DECORATION: none}
A:visited {COLOR: gray; TEXT-DECORATION: none}
A:active {TEXT-DECORATION: none}
A:hover {COLOR: blue; TEXT-DECORATION: underline} -->
</STYLE>
</p>
<p><a href="l1.htm">El texto que quieras.</a><br>
<a href="l2.htm">otro texto.</a><br>
<a href="l3.htm">Otro texto.</a><br>
</p>

Transformar el cursor en una mira:


Transform la clsica 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 y vean en la barra de estado. (para verlo bien en
sta pgina pasen el mouse varias veces, ya que hay otro cdigo parecido que lo obstruye).

<a href="http://www.CheNico.com"
onmouseout="window.status=''"

ANGELITO WEB 6
TUTORIALES DE PROGRAMACION
onmouseover="window.status='Ac aparece el mensaje que quieras';return true">
Pauluk Computacin</a>

Dificultar copia de pgina:


Con este recurso sencillo podemos hacer ms difcil el acceso al cdigo-fuente o la copia de
imgenes de nuestro sitio. Cuando el visitante haga click con el botn derecho del mouse, surgir
un mensaje creado previamente por nosotros. Recordemos que a algunas personas no les gusta
este tipo de bloqueo. Nosotros tenemos que decidir si queremos incluirlo o no en nuestras
pginas.

Podemos colocarlo antes de la etiqueta <html> o despus de la etiqueta <body>.

<Script language=JavaScript>
function right(e) {
if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){
alert("Coloca el mensaje aqu.");
return false;
}
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Coloca el mensaje aqu.");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
</script>

Nota: Para evitar este truco, tambin hay un contratruco, si entrs a una pgina que tiene este
truco que no te deja copiar imgenes o texto, solo tens que hacer click con el botn derecho del
mouse sobre la barra de estado y sin soltarlo arrastrarlo hasta la imgen. Listo, se abrir el men
como si la pgina no estuviese bloqueada a la copia. Hay que tener en cuenta que muy poca
gente conoce este truco, por lo tanto pods usar tranquilo el truco de bloqueo.

Establecer una pgina como inicio:


Este cdigo html te sirve para crear un link para que el visitante pueda hacer que tu pgina sea la
de inicio de su computadora. Con solo hacer clic sobre el link creado, tu pgina se iniciar
automticamente 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)';

ANGELITO WEB 7
TUTORIALES DE PROGRAMACION
this.setHomePage('http://www.CheNico.com');">
<FONT face=Arial color=#000000 size=-2><U>
Establecer como pgina de inicio</U></FONT></A>

Enviar un e-mail con Asunto y Mensaje:


Con este truco pods hacer que al hacer clic sobre una palabra, se abra el Outlook para enviar un
mensaje con tu direccin, el asunto que quieras y el texto que quieras. Por ejemplo:

<a href="mailto:webmaster@pauluk.8k.com?subject=Prueba.&body=Estoy probando el


truco...">Hac clic ac para mandarme un mensaje</a>

Abrir un Link en una Ventana Nueva:


Cuando tenemos Links en nuestras pginas y alguien hace clic sobre ellos, automticamente se
abre esa direccin en nuestra ventana. Con este truco podemos hacer que al hacer clic sobre un
determinado Link, esta direccin se abra en una ventana nueva, quedando la nuestra tambin
abierta:

<a href="http://www.CheNico.com" target="_blank">Pauluk Computacin</a>

Crear un PopUp:
Abrir una pequea ventana con una imagen. Podemos darle las medidas que queramos
cambiando "Width" y "Height".

<a name="1"></a><A
onclick="window.open('MiFoto.jpg','Estructuras','toolbar=no,location=no,scrollbars=yes,directorie
no,status=no,menubar=no,resizable=no,width=400,height=475');"
href="#1"><b><font face="Verdana" size="2">Ejemplo</font></b></a>

Otra barra con mas colores:


A continuacin veremos otro cdigo para ponerle color a la barra de desplazamiento, en este caso
vamos a poder personalizar los colores de la barra, del fondo y los bordes. Reemplazar los
nombres de los colores por otros o por los cdigo de letras y nmeros. Mas abajo est la tabla de
colores.

<style>
<!--
body { scrollbar-face-color: darkgreen ;
scrollbar-shadow-color: yellow;
scrollbar-highlight-color: violet;
scrollbar-3dlight-color: navy;
scrollbar-darkshadow-color: magenta;
scrollbar-track-color: blue;
scrollbar-arrow-color: black }

ANGELITO WEB 8
TUTORIALES DE PROGRAMACION
-->
</style>

Observacin: para ver este truco, es necesario tener instalada las ltimas versiones de los
navegadores. Preferentemente Internet Explorer 6.

Abrir un link de una imagen en una ventana nueva:


Con este cdigo podemos insertar una imagen (ej. banner) y que al hacer click sobre ella se abra
el link de destino en una ventana nueva. Primero ponemos la ruta del link de destino, y luego la
ruta donde est alojada la imagen. Si est alojada en la raz de nuestro servidor solo ponemos el
nombre y listo.

<a href="http://www.CheNico.com" target="_blank"><img src="imagen.gif"


border=0></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.CheNico.com "
function hora() {
var h = new Date();
window.status="|======| "
+ h.getHours() +":"+ h.getMinutes() +"" +mensaje ;
window.setTimeout('hora()',100);
}
hora()
//-->
</script>

Botn animado:
Aprend a dar movimiento a tu pgina con botones animados por Java Script. Cada botn puede
llevar a un enlace distinto. Slo tienes que configurar los parmetros "lineArr" y "urlArr" del
script, que permiten destacar cosas en tu pgina.

<font face="Arial, Helvetica, sans-serif" size="2">


<script language="JavaScript">
var timerID = null
var timerRunning = false
var charNo = 0
var charMax = 0
var lineNo = 0
var lineMax = 3
var lineArr = new Array(lineMax)

ANGELITO WEB 9
TUTORIALES DE PROGRAMACION
var urlArr = new Array(lineMax)
lineArr[1] = "Pauluk Computacin"
urlArr[1] = "http://www.CheNico.com"
lineArr[2] = "Trucos PC"
urlArr[2] = "http://www.pauluk.8k.com/trucosprin.htm"
lineArr[3] = "Noticias Tecnolgicas y Actualidad"
urlArr[3] = "http://www.pauluk.8k.com/noticias.htm"
var lineText = lineArr[1]
function StartShow() {
StopShow()
ShowLine()
timerRunning = true
}
function FillSpaces() {
for (var i = 1; i <= lineWidth; i++) {
spaces += " "
}
}
function StopShow() {
if (timerRunning) {
clearTimeout(timerID)
timerRunning = false
}
}
function ShowLine() {
if (charNo == 0) {
if (lineNo < lineMax) {
lineNo++
}
else {
lineNo = 1
}
lineText = lineArr[lineNo]
charMax = lineText.length
}
if (charNo <= charMax) {
document.formDisplay.buttonFace.value = lineText.substring(0, charNo)
charNo++
timerID = setTimeout("ShowLine()", 100)
}
else {
charNo = 0
timerID = setTimeout("ShowLine()", 3000)
}
}
function GotoUrl(url)
{
top.location.href = url
}
document.write("<form name=\"formDisplay\">");
document.write("<input type=\"button\" name=\"buttonFace\"
value=\"&{lineText}\" size=\"18\" onClick=\"GotoUrl(urlArr[lineNo])\">");
document.write("</form>");

ANGELITO WEB 10
TUTORIALES DE PROGRAMACION
StartShow();
</script></font>

Letrero de mensajes:
Este es un efecto muy fcil de lograr y muy funcional para tu pgina. Pods definir cuntos textos
y enlaces quieras. Ellos se destacarn y tu pgina quedar mucho ms dinmica. Pods ver cmo
personalizar este recurso al final de esta pgina. Es mejor que Java ya que es mucho ms liviano
y rpido de cargarse, y no necesita archivos adicionales.

Para incluir este recurso en tu pgina debes seguir dos pasos:

Paso 1: Incluye el siguiente cdigo en tu etiqueta "<BODY>", agrega un espacio despus del
ltimo parmetro e incluye:
onload="if (document.all||document.layers) {regenerate2();update()}"
Observa un ejemplo sencillo de cmo quedara la etiqueta:
<body onload="if (document.all||document.layers) {regenerate2();update()}">

Paso 2: Pega en tu pgina HTML el siguiente cdigo personalizando las partes indicadas:

<style>
<!--
#mensagem{
position:relative;
layer-background-color:black;
width:400;
height:12;
}
#submensagem{
background-color:black;
position:absolute;
border: 1px solid black;
width:400;
height:12;
}
.submensagemfont{
font:bold 12px Verdana;
text-decoration:none;
color:white;
}
.submensagemfont a{
top:0;
color:white;
text-decoration:none;
}
-->
</style>
<div id="mensagem">
<div id="submensagem" class="submensagemfont">Iniciando...</div>
</div>
<script language="JavaScript1.2">

ANGELITO WEB 11
TUTORIALES DE PROGRAMACION
var speed=4500
var textos=new Array()
textos[0]="<center><a href='Enlace1 Aqu'>Descripcin del enlace1
aqu</a></center>"
textos[1]="<center><a href='Enlace2 Aqu'>Descripcin del enlace2
aqu</a></center>"
textos[2]="<center><a href='Enlace3 Aqu'>Descripcin del enlace3
aqu</a></center>"

i=0
if (document.all)
tickerobject=document.all.submensagem.style
else
tickerobject=document.mensagem.document
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}

function update(){
BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);
if (document.layers){
document.mensagem.document.submensagem.document.write('<span
class="submensagemfont">'+textos[i]+'</span>')
document.mensagem.document.submensagem.document.close()
}
else
document.all.submensagem.innerHTML=textos[i]

if (i<textos.length-1)
i++
else
i=0
setTimeout("update()",speed)
}

function BgFade(red1, grn1, blu1, red2,


grn2, blu2, steps) {
sred = red1; sgrn = grn1; sblu = blu1;
ered = red2; egrn = grn2; eblu = blu2;
inc = steps;
step = 0;
RunFader();
}
function RunFader() {
var epct = step/inc;
var spct = 1 - epct;
if (document.layers)
tickerobject.bgColor =
Math.floor(sred * spct + ered *

ANGELITO WEB 12
TUTORIALES DE PROGRAMACION
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
else
tickerobject.backgroundColor=
Math.floor(sred * spct + ered *
epct)*256*256 +
Math.floor(sgrn * spct + egrn * epct)*256 +
Math.floor(sblu * spct + eblu * epct);
if ( step < inc ) {
setTimeout('RunFader()',50);
}
step++;
}
</script>

Pantalla que tiembla:


Al insertar este cdigo, cada vez que entremos en la Web se producir una especie de terremoto
en el explorador. Un efecto interesante para atraer la atencin de nuestros visitantes.

<html>
<head>
<title>www.CheNico.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">


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

function tremer(n) {

if (self.moveBy) {

for (i = 10; 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);

}}}}

tremer(5)

</script>

ANGELITO WEB 13
TUTORIALES DE PROGRAMACION
<Script language=JavaScript>

function right(e) {

if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){

alert("www.CheNico.com");

return false;

else if (navigator.appName == 'Microsoft Internet Explorer' &&

(event.button == 2 || event.button == 3)) {

alert("www.CheNico.com");

return false;

return true;

document.onmousedown=right;

if (document.layers) window.captureEvents(Event.MOUSEDOWN);

window.onmousedown=right;

</script>
</body>
</html>

Botn Colorido:
Cansado del botn siempre gris? Ahora con CSS pods definir cualquier color para tus botones.
Ellos combinarn ms con tu pgina y son muy fciles de crear.

Copia el cdigo que sigue y pegalo dentro de la etiqueta de formulario de tu pgina:

<input type="submit" name="button" value="www.CheNico.com" style="color:


#000000; background-color: #FF9900">

Texto que sigue al mouse:

ANGELITO WEB 14
TUTORIALES DE PROGRAMACION
Hac que un texto cualquiera siga al mouse del visitante en tu pgina. Es un efecto fabuloso y
fcil de incluir en las pginas

Incluye el siguiente cdigo en tu pgina HTML:

<style>
.animado {position:absolute;visibility:visible;top:-50px;font-size:10pt;font-
family:Arial;font-weight:bold;color:black;}
</style>
<script language=JavaScript>
var x,y
var tempo=10
var espera=0

var texto="www.CheNico.com"
texto=texto.split("")

var xpos=new Array()


for (i=0;i<=texto.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()


for (i=0;i<=texto.length-1;i++) {
ypos[i]=-50
}

function seguir(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
espera=1
}

function animar_cursor() {
if (espera==1 && document.all) {
for (i=texto.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+tempo
ypos[i]=ypos[i-1]
}
xpos[0]=x+tempo
ypos[0]=y

for (i=0; i<texto.length-1; i++) {


var camada = eval("span"+(i)+".style")
camada.posLeft=xpos[i]
camada.posTop=ypos[i]
}
}

else if (espera==1 && document.layers) {


for (i=texto.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+tempo

ANGELITO WEB 15
TUTORIALES DE PROGRAMACION
ypos[i]=ypos[i-1]
}
xpos[0]=x+tempo
ypos[0]=y

for (i=0; i<texto.length-1; i++) {


var camada = eval("document.span"+i)
camada.left=xpos[i]
camada.top=ypos[i]
}
}
var timer=setTimeout("animar_cursor()",30)
}

</script>
<script Language=JavaScript>
for (i=0;i<=texto.length-1;i++) {
document.write("<span id='span"+i+"' class='animado'>")
document.write(texto[i])
document.write("</span>")
}

if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = seguir;
animar_cursor()
</script>

Imagen volando por la pantalla:


Este efecto hace que cualquier imagen que elijas quede "paseando" por la pantalla, siendo un
recurso excelente tanto para llamar la atencin por alguna novedad en tu sitio como para darle
ms movimiento a la pgina.

Copi y peg el siguiente cdigo en tu pgina HTML.


Record que la imagen debe estar en el mismo directorio de tu pgina html.

<SCRIPT language="JavaScript1.2">
var imagem="Ingresa el nombre del archivo de imagen aqu"
if (document.layers)
{document.write("<LAYER NAME='animacao' LEFT=10 TOP=10><img
src='"+imagem+"' ></LAYER>")}
else if (document.all){document.write("<div id='animacao'
style='position:absolute;top:10px;left:10px;width:17px;height:22px;z-index:50'><img
src='"+imagem+"'></div>")}

conta=-1;
move=1;

ANGELITO WEB 16
TUTORIALES DE PROGRAMACION
function curva(){
abc=new Array(0,1,1,1,2,3,4,0,6,-1,-1,-1,-2,-3,-4,0,-6)
for (i=0; i < abc.length; i++)
{var C=Math.round(Math.random()*[i])}
iniciar=abc[C];
setTimeout('curva()',1900);
return iniciar;
}
ypos=10;
xpos=10;
movimento = 60;
function moveR(){
caminho=movimento+=iniciar;
y = 4*Math.sin(caminho*Math.PI/180);
x = 6*Math.cos(caminho*Math.PI/180);
if (document.layers){
ypos+=y;
xpos+=x;
document.animacao.top=ypos+window.pageYOffset;
document.animacao.left=xpos+window.pageXOffset;
}
else if (document.all){
ypos+=y;
xpos+=x;
document.all.animacao.style.top=ypos+document.body.scrollTop;
document.all.animacao.style.left=xpos+document.body.scrollLeft;
}
T=setTimeout('moveR()',50);
}
function edges(){
if (document.layers){
if (document.animacao.left >= window.innerWidth-
40+window.pageXOffset)movimento=Math.round(Math.random()*45+157.5);
if (document.animacao.top >= window.innerHeight-
30+window.pageYOffset)movimento=Math.round(Math.random()*45-112.5);
if (document.animacao.top <= 2+window.pageYOffset) movimento =
Math.round(Math.random()*45+67.5);//OK!
if (document.animacao.left <= 2+window.pageXOffset) movimento =
Math.round(Math.random()*45-22.5);//OK!
}
else if (document.all)
{
if (document.all.animacao.style.pixelLeft >= document.body.offsetWidth-
45+document.body.scrollLeft)movimento=Math.round(Math.random()*45+157.5);
if (document.all.animacao.style.pixelTop >= document.body.offsetHeight-
35+document.body.scrollTop)movimento=Math.round(Math.random()*45-112.5);
if (document.all.animacao.style.pixelTop <= 2+document.body.scrollTop) movimento =
Math.round(Math.random()*45+67.5);//OK!
if (document.all.animacao.style.pixelLeft <= 2+document.body.scrollLeft) movimento
= Math.round(Math.random()*45-22.5);//OK!
}
setTimeout('edges()',100);
}

ANGELITO WEB 17
TUTORIALES DE PROGRAMACION
function efeito(){
curva();
moveR();// onUnload="opener.gO()"
edges();
}
if (document.all||document.layers)
efeito()
</script>

Texto en expansin:
Coloc en tu pgina mensajes animados que se agrandan y llaman la atencin de los visitantes.
Adems, incluyen enlaces hacia donde vos quieras.

Copi el siguiente cdigo y pegalo en tus pginas debajo de la etiqueta <Body>.

<script language="JavaScript">
var velocidade = 45;
var ciclo = 2000;
var tamanho = 20;
var x = 0;
var y = 0;
var mensagens, size;
var esize = "</font>";

function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
var mensagens2 = new initArray(
"Visita",
"www.CheNico.com",
"webmaster@pauluk.8k.com"
);
if(navigator.appName == "Netscape")
document.write('<layer id="wds"></layer><br>');
if (navigator.appVersion.indexOf("MSIE") != -1)
document.write('<span id="wds"></span><br>');
function aumenta(){
mensagens = mensagens2[y];
if (x < tamanho) {
x++;
setTimeout("aumenta()",velocidade);
}
else setTimeout("diminui()",ciclo);

if(navigator.appName == "Netscape") {
size = "<font face=arial color=#000099 point-size='"+x+"pt'>";
document.wds.document.write(size+"<center><a href=http://www.CheNico.com

ANGELITO WEB 18
TUTORIALES DE PROGRAMACION
Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<font face=arial color=#000099><center><a
href=http://www.CheNico.com Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center></font>";
wds.style.fontSize=x+'px'
}
}
function diminui(){
if (x > 1) {
x--;
setTimeout("diminui()",velocidade);
}
else {
setTimeout("aumenta()",ciclo);
y++;
if (y > mensagens2.length - 1) y = 0;
}
if(navigator.appName == "Netscape") {
size = "<font face=arial color=#000099 point-size='"+x+"pt'>";
document.wds.document.write(size+"<center><a href=http://www.CheNico.com
Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
wds.innerHTML = "<font face=arial color=#000099><center><a
href=http://www.CheNico.com Target=_blank style=text-
decoration:none;color:#000099>"+mensagens+"</a></center></font>";
wds.style.fontSize=x+'px'
}
}
setTimeout("aumenta()",velocidade);
</script>

Pgina protegida por clave:


Este es un excelente recurso. Pods proteger tus pginas con una clave. As pods definir
exactamente quienes entrarn a tu pgina. No tens que preocuparte por configuraciones. Es
muy sencillo: la clave siempre ser el nombre de tu pgina sin la extensin .htm, es decir, si la
pgina tiene el nombre de "ejemplo.htm", la clave ser "ejemplo". Ves que fcil?.

Para tener este recurso en tu sitio debes incluir un cdigo en la pgina de "entrada" en donde el
visitante ingresar la clave, y enviar a tu sitio el archivo de la pgina que ser cargada.

<Form name="frm">
<center>
<Script Language="JavaScript">
<!--

ANGELITO WEB 19
TUTORIALES DE PROGRAMACION
//
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 al pasar el mouse:


Con este truco pods hacer que adems de cambiar el color clsico gris de la barra de
desplazamiento por otro, hacer que cuando el mouse se pose sobre ella cambie a otro color.
Cambiando los nmeros y letras en verde variaran los colores. Probalo pasando por la barra de la
derecha!.

<script language="JavaScript1.2">
<!--
function scrollBar(line,face,theme)
{
if (!line||!face)
{
line=null;
face=null;
switch(theme)
{
case "blue":
var line="black";
var face="#6699FF";
break;
}
}

with(document.body.style)
{
scrollbarDarkShadowColor=line;
scrollbar3dLightColor=line;
scrollbarArrowColor="black";
scrollbarBaseColor=face;
scrollbarFaceColor=face;
scrollbarHighlightColor=face;
scrollbarShadowColor=face;

ANGELITO WEB 20
TUTORIALES DE PROGRAMACION
scrollbarTrackColor="#FFFFFF";
}
}

function colorBar(){
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var x = event.clientX;
var y = event.clientY;
if(x>w) scrollBar('#000080','#E58D28');
else scrollBar(null,null,"blue");
}

if (document.all){
scrollBar(null,null,"blue");
document.onmousemove=colorBar;
}
//-->
</script>"#6699FF";
break;
}
}

with(document.body.style)
{
scrollbarDarkShadowColor=line;
scrollbar3dLightColor=line;
scrollbarArrowColor="black";
scrollbarBaseColor=face;
scrollbarFaceColor=face;
scrollbarHighlightColor=face;
scrollbarShadowColor=face;
scrollbarTrackColor="#FFFFFF";
}
}

function colorBar(){
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var x = event.clientX;
var y = event.clientY;
if(x>w) scrollBar('#000080','#E58D28');
else scrollBar(null,null,"blue");
}

if (document.all){
scrollBar(null,null,"blue");
document.onmousemove=colorBar;
}
//-->
</script>

ANGELITO WEB 21
TUTORIALES DE PROGRAMACION
Cambiar el color de la barra de desplazamiento:
Con ste cdigo van a conseguir cambiar el clsico color gris de la barra de desplazamiento de la
derecha y abajo por el color que quieran. Para cambiar de colores, cambien el nmero 000000
por otros, cada color tiene su nmero, pero la lista es muy larga, as que prueben con los nmero
que ya van a encontrar el deseado.

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

Reloj - formato texto:


Este es otro tipo de reloj que tambin cuenta los segundos y que puede utilizar texto. Es muy
fcil incluirlo en tu pgina. Siempre que un usuario acceda a tu sitio el efecto ser iniciado.

Paso 1: Para que el recurso se inicie junto con la pgina, debes incluir dentro de la etiqueta
<body> el parmetro de inicio. Agreg un espacio despus del ltimo parmetro e incluye:

Onload="show5()"

Observa un ejemplo sencillo de cmo queda la etiqueta:


<body Onload="show5()">

Atencin! Sin eso tu reloj no funcionar.

Paso 2: Incluye el siguiente cdigo en tu pgina despus de la etiqueta <body>.

<Font face=Verdana><span id=relogio style="POSITION: absolute"></span>


<Script Language=JavaScript>
<!--
function show5(){
if (!document.layers&&!document.all)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0)

ANGELITO WEB 22
TUTORIALES DE PROGRAMACION
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
meurelogio="<font size='5' face='Arial'><b>"+hours+":"+minutes+":"
+seconds+" "+dn+"</b></font>"
if (document.layers){
document.layers.relogio.document.write(meurelogio)
document.layers.relogio.document.close()
}
else if (document.all)
relogio.innerHTML=meurelogio
setTimeout("show5()",1000)
}

//-->
</script>
</font>

Poniendo fecha en tu sitio:


Aprend a incluir la fecha en tu sitio sin necesidad de actualizarla cada da. Slo tens que usar
un JavaScript que automticamente exhibir la fecha del da en tu pgina cada vez que sta se
abra.

No tens que preocuparte con ninguna configuracin. Slo tens que copiar y pegar el cdigo en
tu pgina.

<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 = " Mircoles, "

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

ANGELITO WEB 23
TUTORIALES DE PROGRAMACION
else if(myday == 5)
day = " Viernes, "

else if(myday == 6)
day = " Sbado, "

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:

ANGELITO WEB 24
TUTORIALES DE PROGRAMACION
Con este recurso personalizs 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 cdigo y pgalo 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>

Atrs y Adelante:
Atrs:

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

Adelante:

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

Imprimir pagina actual:


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

Cartel de novedades:
Este efecto te permite tener un cartel o letrero de mensajes incluyendo enlaces para tu sitio. Los
mensajes van cruzando la pantalla como si fueran noticias; es un recurso excelente para destacar
caractersticas especiales de tu sitio. Cada mensaje tendr un enlace

Paso 1: Copi el siguiente cdigo y pegalo en tu pgina:

<script language="JavaScript1.2">
var largura=150
var altura=120
var bgcolor='white'
var fundo=''

ANGELITO WEB 25
TUTORIALES DE PROGRAMACION
var mensagens=new Array()
mensagens[0]="<center><font face='Arial' size=2><a href='Coloca la direccin de la
pgina 1 aqu'>Coloca el texto del enlace 1 aqu</a></font></center>"
mensagens[1]="<center><font face='Arial' size=2><a href='Coloca la direccin de la
pgina 2 aqu'>Coloca el texto del enlace 2 aqu</a></font></center>"
mensagens[2]="<center><font face='Arial' size=2><a href='Coloca la direccin de la
pgina 3 aqu'>Coloca el texto del enlace 3 aqu</a></font></center>"
mensagens[3]="<center><font face='Arial' size=2><a href='Coloca la direccin de la
pgina 4 aqu'>Coloca el texto del enlace 4 aqu</a></font></center>"
mensagens[4]="<center><font face='Arial' size=2><a href='Coloca la direccin de la
pgina 5 aqu'>Coloca el texto del enlace 5 aqu</a></font></center>"

if (mensagens.length>1)
i=2
else
i=0

function mover1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("mover1(tlayer)",3000)
setTimeout("mover2(document.principal.document.segundo)",3000)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("mover1(tlayer)",100)
}
else{
tlayer.top=altura
tlayer.document.write(mensagens[i])
tlayer.document.close()
if (i==mensagens.length-1)
i=0
else
i++
}
}

function mover2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("mover2(tlayer2)",3000)
setTimeout("mover1(document.principal.document.primeiro)",3000)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("mover2(tlayer2)",100)
}
else{

ANGELITO WEB 26
TUTORIALES DE PROGRAMACION
tlayer2.top=altura
tlayer2.document.write(mensagens[i])
tlayer2.document.close()
if (i==mensagens.length-1)
i=0
else
i++
}
}

function mover3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("mover3(tdiv)",3000)
setTimeout("mover4(segundo2)",3000)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("mover3(tdiv)",100)
}
else{
tdiv.style.pixelTop=altura
tdiv.innerHTML=mensagens[i]
if (i==mensagens.length-1)
i=0
else
i++
}
}

function mover4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("mover4(tdiv2)",3000)
setTimeout("mover3(primeiro2)",3000)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("mover4(segundo2)",100)
}
else{
tdiv2.style.pixelTop=altura
tdiv2.innerHTML=mensagens[i]
if (i==mensagens.length-1)
i=0
else
i++
}
}

ANGELITO WEB 27
TUTORIALES DE PROGRAMACION
function iniciar(){
if (document.all){
mover3(primeiro2)
segundo2.style.top=altura
segundo2.style.visibility='visible'
}
else if (document.layers){
document.principal.visibility='show'
mover1(document.principal.document.primeiro)
document.principal.document.segundo.top=altura+5
document.principal.document.segundo.visibility='show'
}
}
</script>

<table width="150" border="1" cellspacing="1" cellpadding="0">


<tr>
<td>
<ilayer id="principal" width=&{largura}; height=&{altura}; bgColor=&{bgcolor};
background=&{fundo}; visibility=hide>
<layer id="primeiro" left=0 top=1 width=&{largura};>
<script language="JavaScript1.2">
if (document.layers)
document.write(mensagens[0])
</script>
</layer>
<layer id="segundo" left=0 top=0 width=&{largura}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(mensagens[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (document.all){
document.writeln('<span id="principal2"
style="position:relative;width:'+largura+';height:'+altura+';overflow:hiden;backgroun
d-color:'+bgcolor+' ;background-image:url('+fundo+')">')
document.writeln('<div
style="position:absolute;width:'+largura+';height:'+altura+';clip:rect(0 '+largura+'
'+altura+' 0);left:0;top:0">')
document.writeln('<div id="primeiro2"
style="position:absolute;width:'+largura+';left:0;top:1;">')
document.write(mensagens[0])
document.writeln('</div>')
document.writeln('<div id="segundo2"
style="position:absolute;width:'+largura+';left:0;top:0;visibility:hidden">')
document.write(mensagens[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}

ANGELITO WEB 28
TUTORIALES DE PROGRAMACION
iniciar()
</script>
</td>
</tr>
</table>>

Personalizando: Para cambiar el color de fondo o incluir una imagen de fondo, observa esta
parte del cdigo:
var largura=150
var altura=120
var bgcolor='white'
var fundo=''

Donde dice "white" pods ingresar el valor hexadecimal del nuevo color; por ejemplo: #FFCC00

En "fondo" pods colocar el nombre de la imagen de fondo del letrero; por ejemplo:

var largura=150
var altura=120
var bgcolor='white'
var fundo='Nombre del archivo de imagen'

Para incluir ms mensajes en el letrero, observ que el ltimo mensaje aparece de la siguiente
forma:

mensagens[4]="<center><font face='Arial' size=2><a href='Coloca la direccin de la


pgina 5 aqu'>Coloca el texto del enlace 5 aqu</a></font></center>"

Slo tens que agregar una unidad al nmero indicado al final del mensaje. Por ejemplo:

mensagens[5]="<center><font face='Arial' size=2><a href='Coloca la direccin de la


pgina 5 aqu'>Coloca el texto del enlace 5 aqu</a></font></center>"
mensagens[6]="<center><font face='Arial' size=2><a href='Coloca la direccin de la
pgina 6 aqu'>Coloca el texto del enlace 6 aqu</a></font></center>"

Segu hasta llegar al nmero total de mensajes que desees incluir.

Barra de estado fija:


Pods 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 ms personalizado, adems de contar con otras
ventajas. Por ejemplo: el visitante no ver la direccin del enlace al que est apuntando, slo el
mensaje definido por vos.

<Script language="JavaScript">
statuss();
function statuss()
{
window.status = "www.pauluk.8k.com - Un Sitio. Muchas Opciones.";
setTimeout("statuss()", 1);

ANGELITO WEB 29
TUTORIALES DE PROGRAMACION
}
</script>

Saludo al visitante:
Puedes poner en tu sitio un mensaje personalizado segn la hora en que el visitante entre. Este
puede recibir el saludo "Buen da", "Buenas tardes", "Buenas noches", o puedes sustituirlos
por otros mensajes de tu preferencia. De esta forma el visitante ver el mensaje de acuerdo con
el horario que entre a tu pgina.

<Font size=2 face=arial><b>


<Script Language="JavaScript">
<!--
today = new Date()
if(today.getMinutes() < 10){
pad = "0"}
else
pad = "";
document.write ;if((today.getHours() >=6) && (today.getHours() <=9)){
document.write("Buen da!")
}
if((today.getHours() >=10) && (today.getHours() <=11)){
document.write("Buen da!")
}
if((today.getHours() >=12) && (today.getHours() <=19)){
document.write("Buenas tardes!")
}
if((today.getHours() >=20) && (today.getHours() <=23)){
document.write("Buenas noches!")
}
if((today.getHours() >=0) && (today.getHours() <=3)){
document.write("Buenas noches!")
}
if((today.getHours() >=4) && (today.getHours() <=5)){
document.write("Buenas noches!")
}
// -->
</script>
</b></font>

Texto animado:
Con este recurso puedes hacer que cualquier texto tenga movimiento en tu pgina. Es ideal para
destacar tu logo o lo que vos prefieras.

<script language="JavaScript">
<!--
done = 0;
step = 4

ANGELITO WEB 30
TUTORIALES DE PROGRAMACION
function anim(yp,yk)
{
if(document.layers) document.layers["texto"].top=yp;
else document.all["texto"].style.top=yp;
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35);
}
function start()
{
if(done) return
done = 1;
if(navigator.appName=="Netscape") {
document.texto.left=innerWidth/2 - 145;
anim(60,innerHeight - 60)
}
else {
texto.style.left=11;
anim(60,document.body.offsetHeight - 60)
}
}
// --></script>

<div id="texto" style="position: absolute; top: -50; color: #FF8000; font-family: Arial,
Helvetica; font-weight:bold; font-size:40px;">
<p><font face="Arial, Helvetica, sans-serif" size="3"><b><font size="6"
color="#990000">INGRESA TU TEXTO AQUI</font></b></font></p>
</div>

<script language="JavaScript">
<!--
setTimeout('start()',10);
//-->
</script>

Texto de apertura:
Este es un recurso muy interesante. Pods lograr que, al entrar a tu pgina, el usuario vea un
mensaje de bienvenida o cualquier otro que configures. Luego, el usuario es llevado
automticamente a la pgina que t definas.

Para tener este recurso en tu pgina, slo debes copiar el siguiente cdigo, pegarlo en tu editor y
guardar la pgina como principal. De esta forma, al entrar a tu pgina, los visitantes vern los
mensajes y luego sern llevados a la pgina que t definas. Es muy fcil configurar este recurso.
Basta con alterar las reas destacadas en negrito en el cdigo. Si tienes problemas con algn
editor HTML que no reconozca el cdigo, copia y pega este cdigo en el bloc de notas del
Windows u otro editor de texto y no olvides guardarlo con extensin html.

<HTML>
<HEAD>
<TITLE>Ingresa el ttulo aqu</TITLE>

ANGELITO WEB 31
TUTORIALES DE PROGRAMACION
<SCRIPT LANGUAGE = "JavaScript">
function makeArray() {
this.length = makeArray.arguments.length;
for (var i = 0; i < this.length; i++)
this[i + 1] = makeArray.arguments[i];
}

function makeSlideShow (obj, wait, pre, url) {


this.curText = '';
this.posit = 1;
this.word = obj;
this.length = obj.length;
this.pre = pre;
this.wait = wait;
this.url = url;
this.display = displaySlideShow;
}

function displaySlideShow() {
if (this.posit <= this.length) {
this.curText = this.word[this.posit]
outStringWord = blankFrameTop + this.pre + this.curText + blankFrameBottom;
parent.draw.location = 'javascript:parent.outStringWord';
this.posit++;
}
else {
doneLoop = true;
top.location = this.url;
}
}

function displayLoop() {
if (!doneLoop) reDraw = setTimeout('displayLoop()', wordIntro.wait);
wordIntro.display();
}

var words = new makeArray ('Ingresa el primer texto aqu', 'Ingresa el segundo texto
aqu', 'Ingresa el tercer texto aqu', 'Ingresa el cuarto texto aqu', 'ABRIENDO EL
SITIO... ');
var wordIntro = new makeSlideShow (words, 2500,
'<CENTER><BR><BR><BR><BR><BR><BR><BR><BR><FONT SIZE = 5>', 'Ingresa
aqu el URL de la pgina que aparecer');
var blankFrameTop = '<HTML><BODY BGCOLOR = "#000000" TEXT = "#FFFFFF">';
var blankFrameBottom = '</BODY></HTML>';
var blankFrame = blankFrameTop + blankFrameBottom;
var doneLoop = false;

</SCRIPT>
</HEAD><FRAMESET onLoad = "displayLoop()" ROWS = "100%, *" FRAMEBORDER =
NO BORDER = 0>

ANGELITO WEB 32
TUTORIALES DE PROGRAMACION
<FRAME
SCROLLING=AUTO
SRC = "javascript:parent.blankFrame"
NAME = "draw"
MARGINWIDTH = 2
MARGINHEIGHT = 2>
</FRAMESET>
</HTML>

Texto en la barra de estado:


Con este recurso pods incluir varios mensajes, novedades y noticias sobre tu sitio. Es una forma
de destacar lo que quieras y tambin de agregar un efecto diferente a tu sitio.

<script LANGUAGE="JavaScript">
<!--
var speed = 10
var pause = 1500
var timerID = null
var bannerRunning = false
var ar = new Array()

ar[0] = "Ingresa aqu el primer texto "


ar[1] = "Ingresa aqu el segundo texto"
ar[2] = "Ingresa aqu el tercer texto"
ar[3] = "Ingresa aqu el cuarto texto"
ar[4] = "Ingresa aqu el quinto texto"

var message = 0
var state = ""
clearState()

function stopBanner() {
if (bannerRunning)
clearTimeout(timerID)
timerRunning = false
}

function startBanner() {
stopBanner()
showBanner()
}

function clearState() {
state = ""
for (var i = 0; i < ar[message].length; ++i) {
state += "0"
}
}

ANGELITO WEB 33
TUTORIALES DE PROGRAMACION
function showBanner() {
if (getString()) {
message++
if (ar.length <= message)
message = 0
clearState()
timerID = setTimeout("showBanner()", pause)
}
else {
var str = ""
for (var j = 0; j < state.length; ++j) {
str += (state.charAt(j) == "1") ? ar[message].charAt(j) : " "
}
window.status = str
timerID = setTimeout("showBanner()", speed)
}
}

function getString() {
var full = true
for (var j = 0; j < state.length; ++j) {
if (state.charAt(j) == 0)
full = false
}
if (full) return true
while (1) {
var num = getRandom(ar[message].length)
if (state.charAt(num) == "0")
break
}
state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)
return false
}

function getRandom(max) {
var now = new Date()
var num = now.getTime() * now.getSeconds() * Math.random()
return num % max
}
// -->
</script>

Paso 2: Ingresa el siguiente cdigo en la etiqueta <body> de tu pgina:

<Body onLoad="startBanner()">

Si ya existen otros parmetros en tu etiqueta body, slo agrega un espacio despus del ltimo e
incluye onLoad="startBanner()".
Este comando es importante para hacer que el texto aparezca en la barra de estado
inmediatamente al cargarse la pgina.

ANGELITO WEB 34
TUTORIALES DE PROGRAMACION
Efecto de apertura:
Este es un recurso fabuloso y muy fcil que permite crear un efecto de entrada a tu pgina. Es
slo copiar y pegar el cdigo en tu pgina. Siempre que alguien acceda a tu sitio el efecto ser
activado.

<style>
<!--
.entrada{
position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
-->
</style>
<div id="i1" class="entrada"></div>
<div id="i2" class="entrada"></div>
<div id="i3" class="entrada"></div>
<div id="i4" class="entrada"></div>
<div id="i5" class="entrada"></div>
<div id="i6" class="entrada"></div>
<div id="i7" class="entrada"></div>
<div id="i8" class="entrada"></div>
<script language="JavaScript1.2">
//
var velocidade=10
var tempo=new Array()
var tempo2=new Array()
if (document.layers){
for (i=1;i<=8;i++){
tempo[i]=eval("document.i"+i+".clip")
tempo2[i]=eval("document.i"+i)
tempo[i].width=window.innerWidth/8-0.3
tempo[i].height=window.innerHeight
tempo2[i].left=(i-1)*tempo[i].width
}
}
else if (document.all){
var clipbottom=document.body.offsetHeight,cliptop=0
for (i=1;i<=8;i++){
tempo[i]=eval("document.all.i"+i+".style")
tempo[i].width=document.body.clientWidth/8
tempo[i].height=document.body.offsetHeight
tempo[i].left=(i-1)*parseInt(tempo[i].width)
}
}
function openit(){

ANGELITO WEB 35
TUTORIALES DE PROGRAMACION
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
tempo[i].bottom-=velocidade
for (i=2;i<=8;i=i+2)
tempo[i].top+=velocidade
if (tempo[2].top>window.innerHeight)
clearInterval(stopit)
}
else if (document.all){
clipbottom-=velocidade
for (i=1;i<=8;i=i+2){
tempo[i].clip="rect(0 auto+"+clipbottom+" 0)"
}
cliptop+=velocidade
for (i=2;i<=8;i=i+2){
tempo[i].clip="rect("+cliptop+" auto auto)"
}
if (clipbottom<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>

Quers cambiar el color? Pods cambiarlo por cualquier otro color. Es muy fcil:

Observ que existe una parte del cdigo que contiene:

<style>
<!--
.entrada{
position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
-->
</style>

Donde dice "green", debes poner el nombre en ingls o el cdigo hexadecimal del color que
deseas.

Pods tambin seleccionar uno de los colores que siguen y sustituir la referida parte del cdigo
original por esta nueva que vas a recibir.

ANGELITO WEB 36
TUTORIALES DE PROGRAMACION
Imagen que sigue al mouse:
Observ cmo queda el cursor del mouse con este recurso. Pods elegir la imagen que quieras y
sta acompaar el movimiento del mouse. Puede ser el logotipo de tu empresa, por ejemplo, o
la imagen de tu preferencia. Tu sitio ganar personalidad y combinar mucho ms con tu estilo.

Para tener este recurso en tu pgina, tens que seguir dos pasos:

Paso 1: Inclu el siguiente cdigo en tu pgina HTML.

<script language="JavaScript">
<!--
function YY_Mousetrace(evnt)
{
if (yyns4)
{
if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }
else{
yy_ml=(event.clientX + document.body.scrollLeft);
yy_mt=(event.clientY + document.body.scrollTop);
}
if (yy_tracescript)eval(yy_tracescript)
}
//-->
</script>
<script language="JavaScript">
<!--
function YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep)
{
if ((document.layers)||(document.all)){
eval("myfunc=yyfnx.replace(/x/gi, yycnt)");
with (Math) {yynextx= eval(myfunc)}
eval("myfunc=yyfny.replace(/x/gi, yycnt)");
with (Math) {yynexty= eval(myfunc)}
yycnt=(yyloop && yycnt>=yystep*yybilder)?0:yycnt+yystep;
if (document.layers){
eval(yydiv+".top="+(yynexty+yytop))
eval(yydiv+".left="+(yynextx+yyleft))
}
if (document.all){
eval("yydiv=yydiv.replace(/.layers/gi, '.all')");
eval(yydiv+".style.pixelTop="+(yynexty+yytop));
eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));
}
argStr='YY_Layerfx('+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'",
'+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+')';
if (yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");}
}
}
//-->
</script>
<script language='JavaScript'>

ANGELITO WEB 37
TUTORIALES DE PROGRAMACION
<!--
var yyns4=window.Event?true:false; var yy_mt = 0; var yy_ml = 0;
if (yyns4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = YY_Mousetrace;
yy_tracescript = '';
//-->
</script>

<div id="Orbita" style="position:absolute; left: 475px; top: 11px; width: 36px; height:
32px"><img src="Ingresa aqu el nombre del archivo de imagen" border=0></div>

En las ltimas lneas donde dice que tens que ingresar el nombre del archivo de imagen que
aparecer con el cursor del mouse, pods incluir archivos del tipo gif o jpg.

Paso 2: Ahora es necesario que incluyas el cdigo que sigue en tu tag <body>, que quedar as:

<body onLoad="YY_Mousetrace('',',document.YY_Mousetrace1');
YY_Layerfx(8,18,'yy_ml','yy_mt','document.layers[\'Orbita\']',50000,false,0,0,10)">

Si ya existen otros parmetros en tu etiqueta , agreg un espacio despus del ltimo y luego
inclu:

onLoad="YY_Mousetrace('',',document.YY_Mousetrace1');
YY_Layerfx(8,18,'yy_ml','yy_mt','document.layers[\'Orbita\']',50000,false,0,0,10)"

Efectos de transicin especiales:


Estos efectos de transicin son especiales porque con ellos tu pgina tendr una apertura muy
original, pero slo funcionarn con Internet Explorer. No tendrs problemas para utilizar este
recurso, ya que los usuarios de otros navegadores no vern errores y la pgina se cargar
normalmente.

Ingres el cdigo debajo de la etiqueta <body> de tu pgina.

<script language=javaScript>
var n = 15
fadeIn();
function fadeIn(){
var num=new
Array("FFFFFF","FFCC00","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g")
for (var i=0; i<=n; i++){
for (var j=0; j<= n; j++){
color=num[i]+num[j]+num[i]+num[j]+num[i]+num[j]
document.bgColor=color
}}
document.bgColor="#FFFFFF"
}
</script>

Men desplegable:
ANGELITO WEB 38
TUTORIALES DE PROGRAMACION
El men desplegable permite que coloques varios enlaces en un solo lugar. Con esto, gans
espacio y facilidad de navegacin. Este men no necesita un botn para activarse. Basta con
seleccionar el enlace y automticamente el navegador se dirigir a la pgina. Este men funciona
en pginas sin marcos.

Para crear tu men y personalizarlo, peg el siguiente cdigo en tu pgina HTML:

<form>
<select NAME="links"
onChange="top.location.href=this.form.links.options[this.form.links.selectedIndex].val
ue">
<option SELECTED>Elija la seccin que desee</option>
<option VALUE="http://www.pauluk.8k.com">Pauluk Computacin</option>
<option VALUE="http://www.pauluk.8k.com/trucos.htm">Trucos PC</option>
<option VALUE="http:/www.pauluk.8k.com/noticias.htm">Noticias
Tecnolgicas</option>
</select>
</form>

Instrucciones para personalizacin: Observ que cada opcin del men se hace con la
etiqueta:

<option VALUE="Ingresa el enlace aqu">Ingresa el nombre del enlace aqu</option>

No alteres la siguiente etiqueta:

<select NAME="links"
onChange="top.location.href=this.form.links.options[this.form.links.selectedIndex].val
ue">

Si cambis algo en ella, tu men no funcionar correctamente.

Tu icono en la lista de los favoritos:


Este recurso es muy bueno pero slo funcionar en IE. Cuando alguien agrega tu pgina a la lista
de favoritos, aparece al lado del ttulo un pequeo icono de Internet Explorer. Qu tal si colocas
tu propio icono all? S: ms personalizacin para tu sitio.

Para que el icono aparezca en la lista de favoritos del usuario, tens que colocarlo, primero,
dentro de tu espacio y despus, incluir dentro de tus pginas una pequea y simple lnea de
cdigo que har que el mismo aparezca en la lista. Pods usar cualquier icono que desees (no
olvides que los archivos de icono tienen la extensin .ICO, imgenes gif o jpg no
pueden ser usadas).

Incluye el siguiente cdigo entre las etiquetas "<head>" y "</head>" de tu pgina:

<link rel="SHORTCUT ICON" href="CONO AQU">

ANGELITO WEB 39
TUTORIALES DE PROGRAMACION
Sonido de fondo en la pgina:

Pods incluir en tu pgina un sonido de fondo. De esta forma, siempre que alguien acceda a tu
pgina, escuchar dicho sonido. As pods darle ms personalidad a tu sitio. Los archivos de
sonido ideales para una homepage son aquellos en formato MIDI (.MID), pero tambin pods
incluir sonidos del tipo WAVE (.WAV).

Netscape e Internet Explorer presentan algunas diferencias en su sistema y, por lo tanto, en


algunas versiones de Netscape el sonido puede no ser escuchado.

La etiqueta para incluir sonido en tu pgina debe ser <EMBED>. Observ el ejemplo:

<embed src="nombre del tema" autostart="true" loop="10" width="1"


height="1"></embed>

- En "nombre del tema", ingress el nombre del tema mid o wav.


- En "loop", ingress el nmero de veces que el sonido ser repetido.
- En "autostart", defins si quers que el tema comience a sonar solo (atributo TRUE). Si colocs
"FALSE", el usuario tendr que hacer clic en el botn "play" para escuchar el tema.

Actualizar:
La pgina "Actualizar" lleva al usuario a otra pgina sin que el mismo deba ejecutar accin
alguna. Funciona como un simple redireccionador.

<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH"
CONTENT="Segundos;URL=http://www.pauluk.8k.com">
<TITLE> Titulo </TITLE>
</HEAD>
<BODY>
Cdigos HTML
</BODY>
</HTML>

En "segundos", colocs el tiempo que deseas que la pgina demore hasta redireccionar el
usuario al nuevo URL.

Agregar pgina a Favoritos:


Aprend a incluir en tu pgina un enlace para que los usuarios puedan agregarla
automticamente a los favoritos del navegador. El visitante slo tiene que hacer clic en un enlace
para que la pgina se incluya en su lista de favoritos.

ANGELITO WEB 40
TUTORIALES DE PROGRAMACION
<a href="javascript:window.external.AddFavorite('http://www.pauluk.8k.com',
'Pauluk Computacion')"><small><font face="Verdana" size="1">
Agregar a favoritos</font></small></a>

Barra de estado animada:


Pods darle movimiento a la barra de estado del navegador del visitante en tu sitio. Es un efecto
fabuloso que te permite destacar lo que desees.

Copi el siguiente cdigo y pegalo en tus pginas debajo de la etiqueta <Body>.

<script language="JavaScript">
tempo = 10;
chars = 5;
texto = "-- Ingresa el texto aqu --";
wtexto = new Array(33);
wtexto[0] = texto;
blnk = " ";//Mantn estos espacios
for (i = 1; i < 32; i++) {
b = blnk.substring(0, i);
wtexto[i] = "";
for (j = 0; j < texto.length; j++) wtexto[i] = wtexto[i] + texto.charAt(j) + b;
}
function animastatus() {
if (chars > -1) str = wtexto[chars];
else str = wtexto[0];
if (chars-- < -40) chars = 31;
status = str;
clearTimeout(tempo);
tempo = setTimeout("animastatus()", 150);
}
animastatus()
</script>

Efecto de apertura mltiple:


Este efecto ofrece otra alternativa de apertura para tu sitio, una forma diferente de presentarlo a
los visitantes. Es slo copiar y pegar el cdigo en tu pgina. Siempre que alguien acceda a tu sitio
el efecto ser activado.

<style>
.intro{position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
</style>

ANGELITO WEB 41
TUTORIALES DE PROGRAMACION
<div id="i1" class="intro"></div>
<div id="i2" class="intro"></div>
<div id="i3" class="intro"></div>
<div id="i4" class="intro"></div>
<div id="i5" class="intro"></div>
<div id="i6" class="intro"></div>
<div id="i7" class="intro"></div>
<div id="i8" class="intro"></div>
<script language="JavaScript1.2">
var velocidade=20
var tempo=new Array()
var tempo2=new Array()
if (document.layers){
for (i=1;i<=8;i++){
tempo[i]=eval("document.i"+i+".clip")
tempo2[i]=eval("document.i"+i)
tempo[i].width=window.innerWidth
tempo[i].height=window.innerHeight/8
tempo2[i].top=(i-1)*tempo[i].height
}
}
else if (document.all){
var clipright=document.body.clientWidth,clipleft=0
for (i=1;i<=8;i++){
tempo[i]=eval("document.all.i"+i+".style")
tempo[i].width=document.body.clientWidth
tempo[i].height=document.body.offsetHeight/8
tempo[i].top=(i-1)*parseInt(tempo[i].height)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
tempo[i].right-=velocidade
for (i=2;i<=8;i=i+2)
tempo[i].left+=velocidade
if (tempo[2].left>window.innerWidth)
clearInterval(stopit)
}
else if (document.all){
clipright-=velocidade
for (i=1;i<=8;i=i+2){
tempo[i].clip="rect(0 "+clipright+" auto 0)"
}
clipleft+=velocidade
for (i=2;i<=8;i=i+2){
tempo[i].clip="rect(0 auto auto "+clipleft+")"
}
if (clipright<=0)
clearInterval(stopit)
}
}

ANGELITO WEB 42
TUTORIALES DE PROGRAMACION
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>

Quieres cambiar el color? Puedes cambiarlo por cualquier otro color. Es muy fcil:

Observ que existe una parte del cdigo que contiene:

<style>
<!--
.entrada{
position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green
}
-->
</style>

Donde dice "green", tens que poner el nombre en ingls o el cdigo hexadecimal del color que
deseas.

Pods tambin seleccionar uno de los colores que siguen y sustituir la referida parte del cdigo
original por esta nueva que vas a recibir.

Cambiando la barra de estado:


Quers que la barra de estado cambie cuando el mouse pase sobre los enlaces? Es fcil! Pods
hacer que cualquier mensaje aparezca en la barra de estado del navegador cuando alguien pase
el mouse sobre los enlaces de tu pgina. Observ cmo hacerlo ac:

- Ejemplo- El cdigo HTML de un enlace comn se parece al siguiente ejemplo:

<a href=fotos.html>Fotos del Viaje</a>

Slo tens que incluir el siguiente cdigo:

ONMOUSEOVER="window.status='COLOCA EL TEXTO AQUI';return true;"


ONMOUSEOUT="window.status='';return true;"

- Cdigo<a href=fotos.html ONMOUSEOVER="window.status='COLOCA EL TEXTO


AQUI';return true;" ONMOUSEOUT="window.status='';return true;">Fotos del
Viaje</a>

Copia el cdigo y pgalo en tus pginas debajo de la etiqueta <Body>.

ANGELITO WEB 43
TUTORIALES DE PROGRAMACION
Texto aleatorio:
Con el texto aleatorio es posible hacer que, a cada visita a tu pgina, el usuario vea un mensaje
diferente sin necesidad de actualizar tu sitio a todo momento.

<Script Language="JavaScript">
hoje = new Date()
numero_de_textos = 4
segundos = hoje.getSeconds()
numero = segundos % numero_de_textos
if (numero == 0){
texto = "Ingresa el primer texto aqu"
}
if (numero == 01){
texto = "Ingresa el segundo texto aqu"
}
if (numero == 02){
texto = "Ingresa el tercer texto aqu"
}
if (numero == 03){
texto = "Ingresa el cuarto texto aqu"
}
document.write('' + texto +'')
</script>

Instrucciones para personalizacin: Si deseas incluir ms de tres textos, debes ingresar en


"numero de textos" el nmero total de textos que aparecern.

if (numero == Ingresa el nmero del texto aqu){


texto = "Ingresa el texto que aparecer aqu"
}

En "Ingresa el nmero del texto aqu", sigue la secuencia. En el cdigo, por ejemplo, el ltimo
nmero era "03", por lo tanto, para incluir un nuevo texto, el nmero ser "04", y as
sucesivamente para cada nuevo texto.

ATENCION! Incluye el cdigo del nuevo texto siempre antes de "document.write('' + texto
+'') </script>".

Imagen aleatoria:
Con este recurso es posible hacer que, a cada visita a tu pgina, el usuario vea una imagen
diferente sin necesidad de actualizar tu sitio a cada momento.

Imgenes aleatrias con enlaces: Peg el siguiente cdigo en tu pgina HTML. Pods pegarlo
donde quieras que aparezcan las imgenes.

ANGELITO WEB 44
TUTORIALES DE PROGRAMACION
<Script Language="JavaScript">
hoje = new Date()
numero_de_imagens = 2
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if (numero == 0){
banner = "Ingresa el nombre de la imagen 1 aqui"
link = "http://"
alvo = "_self"
}
if (numero == 1){
banner = "Ingresa el nombre de la imagen 2 aqui"
link = "http://"
alvo = "_self"
}
document.write('<a href="' + link + '" target="' + alvo + '" ><img src="' + banner +
'" border=0></a>')
</script>

Aadir el Asunto y el cuerpo cuando nos enven un e-mail:


Ya sabs que para enviar un mensaje, tens que incluir mailto:webmaster@pauluk.8k.com

Bueno, si aads al final de la direccin de correo ?subject=el subject, ste aparecer de forma
automtica en ese campo, as de fcil.

<html>
<a href="mailto:webmaster@pauluk.8k.com?subject=Probando.&body=Probando
truco">Hac clic aqu</a>

Detectar el navegador:
Esto sirve para comprobar el navegador que se est usando, por si queremos crear una pgina
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 pgina segn el explorador -->


function cargar(){
if (esIE30())
window.location.href="indice_ie.htm";
else

ANGELITO WEB 45
TUTORIALES DE PROGRAMACION
window.location.href="indice_netscape.htm";
}
//-->
</script>

Ir a un lugar dentro de la misma pgina:


Nota: Hay que tener en cuenta que se diferencian las maysculas de las minsculas.

<a href="#posicion1">Ir a la posicion1</a>

Ir a un lugar determinado de otra pgina:


Nota: Hay que tener en cuenta que se diferencian las maysculas de las minsculas.

<a href="otra_pagina.htm#posicion1">Ir a la posicion1 de otra_pagina</a>

Cambiar el contenido de una pgina cada "x" segundos:


O mejor dicho, cargar otra pgina despus de "x" segundos.
Este comando debe estar en el bloque <HEAD>...</HEAD>

<HEAD>
<!-- otras cosas -->
<META http-equiv="refresh" content="segundos; url=siguiente_pagina.htm">
<!--y algunas mas -->
</HEAD>

ANGELITO WEB 46
TUTORIALES DE PROGRAMACION

S-ar putea să vă placă și