Documente Academic
Documente Profesional
Documente Cultură
2006
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>
<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>
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();
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>
<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>
</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>
Se recomienda usar sonidos en formato "midi" que son los de menor peso.
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:
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.
<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>
<style type="text/css">
<!--
body { cursor: crosshair}
-->
</style>
<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>
<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.
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>
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>
<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.
<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.
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.
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)
}
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>
<html>
<head>
<title>www.CheNico.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
function tremer(n) {
if (self.moveBy) {
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) {
alert("www.CheNico.com");
return false;
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.
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
<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("")
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
ANGELITO WEB 15
TUTORIALES DE PROGRAMACION
ypos[i]=ypos[i-1]
}
xpos[0]=x+tempo
ypos[0]=y
</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>
<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.
<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>
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">
</p>
</center>
</form>
<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>
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()"
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>
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 "
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".
<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:
Adelante:
<a href="javascript:history.go(1)">Adelante</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
<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>
<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:
Slo tens que agregar una unidad al nmero indicado al final del mensaje. Por ejemplo:
<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.
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 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>
<script LANGUAGE="JavaScript">
<!--
var speed = 10
var pause = 1500
var timerID = null
var bannerRunning = false
var ar = new Array()
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>
<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:
<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:
<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)"
<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.
<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:
<select NAME="links"
onChange="top.location.href=this.form.links.options[this.form.links.selectedIndex].val
ue">
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).
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).
La etiqueta para incluir sonido en tu pgina debe ser <EMBED>. Observ el ejemplo:
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.
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>
<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>
<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:
<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.
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>
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>
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;
}
ANGELITO WEB 45
TUTORIALES DE PROGRAMACION
window.location.href="indice_netscape.htm";
}
//-->
</script>
<HEAD>
<!-- otras cosas -->
<META http-equiv="refresh" content="segundos; url=siguiente_pagina.htm">
<!--y algunas mas -->
</HEAD>
ANGELITO WEB 46
TUTORIALES DE PROGRAMACION