Codigos html 2
|
Crear un PopUp:
Abrir una pequeña ventana con una imagen. Podemos darle las medidas que queramos cambiando "Width" y "Height".
Otra barra con mas colores:
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> Observación: 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 código 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 raíz 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> 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 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++) { 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> Letrero de mensajes:
Este es un efecto muy fácil de lograr y muy funcional para tu página. Podés definir cuántos textos y enlaces quieras. Ellos se destacarán y tu página quedará mucho más dinámica. Podés ver cómo personalizar este recurso al final de esta página. Es mejor que Java ya que es mucho más liviano y rápido de cargarse, y no necesita archivos adicionales.
Para incluir este recurso en tu página debes seguir dos pasos:
Paso 1: Incluye el siguiente código en tu etiqueta "<BODY>", agrega un espacio después del último parámetro e incluye:
onload="if (document.all||document.layers) {regenerate2();update()}"
Observa un ejemplo sencillo de cómo quedaría la etiqueta:
<body onload="if (document.all||document.layers) {regenerate2();update()}">
Paso 2: Pega en tu página HTML el siguiente código 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"> var speed=4500 var textos=new Array() textos[0]="<center><a href='Enlace1 Aquí'>Descripción del enlace1 aquí</a></center>" textos[1]="<center><a href='Enlace2 Aquí'>Descripción del enlace2 aquí</a></center>" textos[2]="<center><a href='Enlace3 Aquí'>Descripción 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 * 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 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.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' && (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> |