Trucos HTML 2
Crear un PopUp:
Abrir una pequeña 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,directories= |
| 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 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 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] = "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>
