Scripts

17
POP UP EN VENTANA <script language="JavaScript" type="text/javascript"> <!--//BEGIN Script function new_window(url) { link = window.open(url,"Link","toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=yes,re sizable=0,width=430,height=300,left=80,top=180"); } //END Script--> </script> Debes copiar el código, modificarlo a tu gusto e insertarlo dentro de las etiquetas: <body> aqui pegamos el script </body> El link para llamar a la ventana también los copias entre <body> y </body> <a href="javascript:new_window('popup_ejemplo.html')">Click aqui para ver el popup</a>

description

sdgesrgv re er

Transcript of Scripts

Page 1: Scripts

POP UP EN VENTANA

<script language="JavaScript" type="text/javascript"><!--//BEGIN Script

function new_window(url) {

link = window.open(url,"Link","toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=yes,resizable=0,width=430,height=300,left=80,top=180");

}//END Script--></script>

Debes copiar el código, modificarlo a tu gusto e insertarlo dentro de las etiquetas: <body> aquipegamos el script </body>

El link para llamar a la ventana también los copias entre <body> y </body>

<a href="javascript:new_window('popup_ejemplo.html')">Click aqui para ver el popup</a>

Page 2: Scripts

CODIGOS <HTML> y JavaScript

PARA QUE LO BAJES A TU PAGINAS SOLO COPIALO Y PEGALO EN TU FUENTE <HTML>

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

copiarlo a otro lado.

<script language="Javascript">

<!-- Begin

function disableselect(e){

return false

}

function reEnable(){

return true

}

document.onselectstart=new Function ("return false" if (window.sidebar){

document.onmousedown=disableselect

document.onclick=reEnable

}

// End -->

</script>

Con este código insertamos un pequeño relojito que indica la cuenta regresiva de las horas, minutos y

segundos que faltan para finalizar el día.

<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

día">

<script language="JavaScript">

<!--

var tiempoAtras;

updateReloj();

function updateReloj() {

var tiempo = new Date();

var hora = 23-tiempo.getHours();

var minutos = 59-tiempo.getMinutes();

var segundos = 59-tiempo.getSeconds();

tiempoAtras= (hora < 10) ? hora :hora;

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

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

Page 3: Scripts

document.Reloj.tiempo.value = tiempoAtras;

setTimeout("updateReloj()",1000);

}

//-->

</script>

</form>

</body>

Con este código podemos hacer que si a un visitante le gustó nuestra Web, la recomiende a un amigo

escribiendo su dirección de correo electrónico en la casilla, al hacer click en "Recomendar esta Web" se

envía un mensaje de correo con el asunto "Pienso que te puede interesar esta página..." y en el cuerpo del

mensaje aparece la dirección completa donde se encuentra el código y el título de la misma.

<form name="eMailer">

ENVÍA ESTA PÁGINA A UN AMIGO

<br>

Indica su e-mail:

<br>

<input type="text" name="address" size="25">

<br>

<input type="button" value="Recomendá esta Web!" onClick="mailThisUrl();">

</form>

<script language="JavaScript1.2">

var good;

function checkEmailAddress(field) {

// the following expression must be all on one line...

var goodEmail = field.value.match(/b(^(S+@).+((.com)|(.net)|

(.edu)|(.mil)|(.gov)|(.org)|(..{2,2}))$)b/gi);

if (goodEmail){

good = true

} else {

alert('Por favor introduce un e-mail valido')

field.focus()

field.select()

good = false

}

}

u = window.location;

m = "Pienso que te puede interesar esta página...";

function mailThisUrl(){

good = false

checkEmailAddress(document.eMailer.address)

if (good){

// the following expression must be all on one line...

Page 4: Scripts

window.location = "mailto:"+document.eMailer.address.value+"?

subject="+m+"&body="+document.title+" "+u;

}

}

</script>

Sorprendé a tus visitantes con este asombroso truco. Al pasar el mouse sobre el link, aparece la

explicación de ese link en un cuadro con la cantidad de palabras que queramos poner. Solo tenés que

reemplazar mis direcciones por las tuyas, y el texto deseado por el tuyo.

<p>

<script language="JavaScript"><!--

function escribe(frase){document.desplaza.cuadro.value=frase; }

// --></script>

</p>

<table border="0">

<tr>

<td width="200"><p align="center"><strong>Opciones.</strong></p>

<p><a href="http://www.CheNico.com"

onmouseover="escribe(' Página principaln ----------------nn Cuando hagas Click en este enlace irás

directamente a la página de inicio de mi web');">Página

principal</a><br>

<a href="http://usuarios.lycos.es/pauluk/trucosprin.htm"

onmouseover="escribe(' Trucos PCn -----------nn Este enlace te llevará a la página de Trucos PC en la que

podés encontrar muchos más trucos interesantes para realizar e incluir en tus páginas web');">Trucos

PC</a><br>

<a href="http://usuarios.lycos.es/pauluk/GLOSARIO.HTM"

onmouseover="escribe(' Glosarion -------------- nn Diccionario de Términos Informáticos. Enterate el

significado de esas palabras de computación que decís todos los días pero que no sabés exactamente qué

significa.');">Glosario</a><br>

</p>

</td>

<td><form name="desplaza">

<p><textarea name="cuadro" rows="8" cols="30"

wrap="physical"></textarea></p>

</form>

</td>

</tr>

</table>

Con éste código van a conseguir cambiar el clásico color gris de la barra de desplazamiento de la derecha y

abajo por el color que quieran. Para cambiar de colores, cambien el número 000000 por otros, cada color

tiene su número, pero la lista es muy larga, así que prueben con los número que ya van a encontrar el

deseado.

Page 5: Scripts

<style>

<!--

BODY { scrollbar-base-color : #000000;

scrollbar-arrow-color : #FFFFFF; }

.nav {

color : #FFCC00;

font-size : 8pt;}

-->

</style>

Aprendé a incluir la fecha en tu sitio sin necesidad de actualizarla cada día. Sólo tenés que usar un

JavaScript que automáticamente exhibirá la fecha del día en tu página cada vez que ésta se abra.

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

página.

<script language="JavaScript">

<!--

mydate = new Date();

myday = mydate.getDay();

mymonth = mydate.getMonth();

myweekday= mydate.getDate();

weekday= myweekday;

if(myday == 0)

day = " Domingo, "

else if(myday == 1)

day = " Lunes, "

else if(myday == 2)

day = " Martes, "

else if(myday == 3)

day = " Miércoles, "

else if(myday == 4)

day = " Jueves, "

else if(myday == 5)

day = " Viernes, "

else if(myday == 6)

day = " Sábado, "

if(mymonth == 0)

month = "Enero "

else if(mymonth ==1)

month = "Febrero "

else if(mymonth ==2)

month = "Marzo "

else if(mymonth ==3)

month = "Abril "

else if(mymonth ==4)

month = "Mayo "

Page 6: Scripts

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 size=1>"+ day);

document.write(myweekday+" de "+month+ "</font>" ;

// -->

</script>

Con este recurso personalizás tu sitio para el visitante. Al entrar, el visitante verá un espacio para ingresar

su nombre y un mensaje que dice "Hola, Fulano".

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

<Script language="JavaScript">

mensagem = prompt("Por favor, ingresa tu nombre",'');

if (mensagem==null) {

document.write("¡Hola, visitante!" }else{

if (mensagem=='') {

document.write("<b><font size=2 color=#000000>¡Hola, visitante!</font></b>" }else{

document.write("<b><font size=2 color=#000000>¡Hola"+mensagem+"! Bienvenido a mi

sitio</font></b>" ;

}

}

</script>

Atrás y Adelante:

Atrás:

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

Adelante:

Page 7: Scripts

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

Puedes poner en tu sitio un mensaje personalizado según la hora en que el visitante entre. Este puede

recibir el saludo "Buen día", "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 página.

<Font size=2><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 día!" }

if((today.getHours() >=10) && (today.getHours() <=11)){

document.write("¡Buen día!" }

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>

Con este recurso es posible hacer que, a cada visita a tu página, el usuario vea una imagen diferente sin

necesidad de actualizar tu sitio a cada momento.

Imágenes aleatórias con enlaces: Pegá el siguiente código en tu página HTML. Podés pegarlo donde

quieras que aparezcan las imágenes.

Page 8: Scripts

<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>

WwW.pAgInAsGrAtIs.Es.Tl

Si queremos poner archivos para que los visitantes los puedan descargar a sus computadoras, solo

debemos subir ese archivo a nuestro servidor e insertar en nuestra Web el siguiente código HTML:

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

No existe un comando que inicie la descarga. Lo que sucede es que, siempre que aparece un tipo de

archivo no reconocido por el navegador, este comienza a descargarlo automáticamente. Ejemplo: Si el

navegador no logra abrir un archivo "zip" (compactado), inicia la descarga automáticamente.

Con este código 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>

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

<style type="text/css">

<!--

Page 9: Scripts

body { cursor: crosshair}

-->

</style>

A continuación veremos otro código 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 código de letras y números. 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 }

-->

</style>

Aprendé a dar movimiento a tu página con botones animados por Java Script. Cada botón puede llevar a

un enlace distinto. Sólo tienes que configurar los parámetros "lineArr" y "urlArr" del script, que permiten

destacar cosas en tu página.

<font 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)

var urlArr = new Array(lineMax)

lineArr[1] = "Pauluk Computación"

urlArr[1] = "http://www.CheNico.com"

lineArr[2] = "Trucos PC"

urlArr[2] = "http://www.pauluk.8k.com/trucosprin.htm"

lineArr[3] = "Noticias Tecnológicas 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++) {

Page 10: Scripts

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>" ;

StartShow();

</script></font>

Al insertar este código, cada vez que entremos en la Web se producirá una especie de terremoto en el

explorador. Un efecto interesante para atraer la atención de nuestros visitantes.

Page 11: Scripts

<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>

<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' &&

Page 12: Scripts

(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>

Este efecto hace que cualquier imagen que elijas quede "paseando" por la pantalla, siendo un recurso

excelente tanto para llamar la atención por alguna novedad en tu sitio como para darle más movimiento a

la página.

Copiá y pegá el siguiente código en tu página HTML.

Recordá que la imagen debe estar en el mismo directorio de tu página 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;

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()*)}

iniciar=abc[C];

Page 13: Scripts

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!

}

Page 14: Scripts

setTimeout('edges()',100);

}

function efeito(){

curva();

moveR();// onUnload="opener.gO()"

edges();

}

if (document.all||document.layers)

efeito()

</script>

Colocá en tu página mensajes animados que se agrandan y llaman la atención de los visitantes. Además, incluyen

enlaces hacia donde vos quieras.

Copiá el siguiente código y pegalo en tus páginas 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 = initArray.arguments;

}

}

var mensagens2 = new initArray(

"Visita",

"www.CheNico.com",

"[email protected]"

);

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);

Page 15: Scripts

}

else setTimeout("diminui()",ciclo);

if(navigator.appName == "Netscape" {

size = "<font 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 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 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 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>

Este es un excelente recurso. Podés proteger tus páginas con una clave. Así podés definir exactamente quienes

entrarán a tu página. No tenés que preocuparte por configuraciones. Es muy sencillo: la clave siempre será el

nombre de tu página sin la extensión .htm, es decir, si la página tiene el nombre de "ejemplo.htm", la clave será

"ejemplo". ¿Ves que fácil?.

Page 16: Scripts

Para tener este recurso en tu sitio debes incluir un código en la página de "entrada" en donde el visitante ingresará

la clave, y enviar a tu sitio el archivo de la página que será cargada.

<Form name="frm">

<center>

<Script Language="JavaScript">

<!--

//

function loadpage(){

var psj=0;

newwin = window.open(document.frm.pswd.value + ".htm"

}

//-->

</script>

Ingresa tu clave:

<input

type="password" name="pswd" size="20">

</center>

<center>

<p>

<input type="button" value="Entra"

onClick="loadpage()" name="button">

&nbsp;</p>

</center>

</form>

<p>

<input type="button" value="Entra"

onClick="loadpage()" name="button">

&nbsp;</p>

</center>

</form>

Page 17: Scripts

Espero te sirvan!