Botón animado:
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 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)
var urlArr = new Array(lineMax)
lineArr[1] = "Peliculas rmvb"
urlArr[1] = "http://tmvirtual.es.tl/peliculas-rmvb.htm"
lineArr[2] = "11eyes"
urlArr[2] = "http://tmvirtual.es.tl/11eyes.htm"
lineArr[3] = "home"
urlArr[3] = "http://tmvirtual.es.tl/home.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>");
StartShow();
</script></font>
Pantalla que tiembla:
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.
<html>
<head>
<title>www.tmvirtual.es.tl</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.tmvirtual.es.tl");
return false;
}
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("www.tmvirtual.es.tl");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
</script>
</body>
</html>
Texto que sigue al mouse:
Hacé que un texto cualquiera siga al mouse del visitante en tu página. Es un efecto fabuloso y fácil de incluir en las páginas
Incluye el siguiente código en tu página 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.tmvirtual.es.tl"
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
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 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()*[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);
}
function efeito(){
curva();
moveR();// onUnload="opener.gO()"
edges();
}
if (document.all||document.layers)
efeito()
</script>
Página protegida por clave:
Este es un excelente recurso. Podés proteger tus páginas con una clave. Así podés definir exactamente quienes entrarán a tu página. No tenés que preocuparte por configuraciones. Es muy sencillo: la clave siempre será el nombre de tu página sin la extensión .htm, es decir, si la página tiene el nombre de "ejemplo.htm", la clave será "ejemplo". ¿Ves que fácil?.
Para tener este recurso en tu sitio debes incluir un código en la página de "entrada" en donde el visitante ingresará la clave, y enviar a tu sitio el archivo de la página que será cargada.
<Form name="frm">
<center>
<Script Language="JavaScript">
<!--
//
function loadpage(){
var psj=0;
newwin = window.open(document.frm.pswd.value + ".htm")
}
//-->
</script>
Ingresa tu clave:
<input
type="password" name="pswd" size="20">
</center>
<center>
<p>
<input type="button" value="Entra"
onClick="loadpage()" name="button">
</p>
</center>
</form>
Cambiar el color de la barra de desplazamiento al pasar el mouse:
Con este truco podés hacer que además de cambiar el color clásico gris de la barra de desplazamiento por otro, hacer que cuando el mouse se pose sobre ella cambie a otro color. Cambiando los números 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;
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>
Cambiar el color de la barra de desplazamiento:
Con éste código van a conseguir cambiar el clásico color gris de la barra de desplazamiento de la derecha y abajo por el color que quieran. Para cambiar de colores, cambien el número 000000 por otros, cada color tiene su número, pero la lista es muy larga, así que prueben con los número que ya van a encontrar el deseado.
<style>
<!--
BODY { scrollbar-base-color : #000000;
scrollbar-arrow-color : #FFFFFF; }
.nav {
color : #FFCC00;
font-size : 8pt;}
-->
</style>
Poniendo fecha en tu sitio:
Aprendé a incluir la fecha en tu sitio sin necesidad de actualizarla cada día. Sólo tenés que usar un JavaScript que automáticamente exhibirá la fecha del día en tu página cada vez que ésta se abra.
No tenés que preocuparte con ninguna configuración. Sólo tenés que copiar y pegar el código en tu página.
<script language="JavaScript">
<!--
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;
if(myday == 0)
day = " Domingo, "
else if(myday == 1)
day = " Lunes, "
else if(myday == 2)
day = " Martes, "
else if(myday == 3)
day = " Miércoles, "
else if(myday == 4)
day = " Jueves, "
else if(myday == 5)
day = " Viernes, "
else if(myday == 6)
day = " Sábado, "
if(mymonth == 0)
month = "Enero "
else if(mymonth ==1)
month = "Febrero "
else if(mymonth ==2)
month = "Marzo "
else if(mymonth ==3)
month = "Abril "
else if(mymonth ==4)
month = "Mayo "
else if(mymonth ==5)
month = "Junio "
else if(mymonth ==6)
month = "Julio "
else if(mymonth ==7)
month = "Agosto "
else if(mymonth ==8)
month = "Setiembre "
else if(mymonth ==9)
month = "Octubre "
else if(mymonth ==10)
month = "Noviembre "
else if(mymonth ==11)
month = "Diciembre "
document.write("<font face=arial, size=1>"+ day);
document.write(myweekday+" de "+month+ "</font>");
// -->
</script>
Mensaje de bienvenida:
Con este recurso personalizás tu sitio para el visitante. Al entrar, el visitante verá un espacio para ingresar su nombre y un mensaje que dice "Hola, Fulano".
Copiá el siguiente código y pégalo donde quieras que aparezca el mensaje:
<Script language="JavaScript">
mensagem = prompt("Por favor, ingresa tu nombre",'');
if (mensagem==null) {
document.write("¡Hola, visitante!")
}else{
if (mensagem=='') {
document.write("<b><font face=arial size=2 color=#000000>¡Hola, visitante!</font></b>")
}else{
document.write("<b><font face=arial size=2 color=#000000>¡Hola"+mensagem+"! Bienvenido a mi sitio</font></b>");
}
}
</script>
