Vuelvo con una versión del ejemplo anterior. Está inspirada en una de las marquesinas que ofrece
SuperPimper, pero aquí no uso flash.
Para empezar, tampoco "creo" una versión LED de los caracteres, uso una fuente sans-serif y la cubro con una "rejilla" que nos da la impresión que está hecha con "puntos". O más o menos. Tampoco nos pongamos en exigentes, que usamos recursos muy modestos y bastante bien quedó.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>REBOTE LED'S RGB.</title>
<script type="text/javascript">
/* 6px es el lado de la imagen que forma la máscara de LED's */
var texto, cartel, ancho, alto, rangoX, rangoY;
var alfa = 6;
var bravo = 6;
var pasosX = 6;
var pasosY = 6;
var dirX = 6;
var dirY = 6;
function carga() {
texto = document.getElementById("cntnd");
cartel = document.getElementById("mrqsn");
var hoy = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
var tiempo = new Date();
texto.innerHTML = "Hoy es " +hoy[tiempo.getDay()];
ancho = texto.offsetWidth;
alto = texto.offsetHeight;
/* 46px = 2 * ancho borde + lado imagen */
rangoX = cartel.offsetWidth - ancho - 46;
rangoY = cartel.offsetHeight - alto - 46;
document.getElementById("rejilla").style.width = cartel.offsetWidth +"px";
document.getElementById("rejilla").style.height = cartel.offsetHeight +"px";
setTimeout("mueve()", 500);
}
function mueve() {
if (pasosX < 6) { dirX = 6; colores(); }
else if (pasosX > (rangoX)){ dirX = -6; colores(); }
else { dirX = dirX; }
if (pasosY < 6) { dirY = 6; colores(); }
else if (pasosY > (rangoY)){ dirY = -6; colores(); }
else { dirY = dirY; }
pasosX = pasosX + dirX;
pasosY = pasosY + dirY;
texto.style.left = pasosX + "px";
texto.style.top = pasosY + "px";
setTimeout("mueve()", 140)
}
var paleta0 = ["#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#ff8000", "#000000"];
var paleta1 = ["#ff0000"];
var nuevo, orden, resto;
function colores() {
if(paleta0.length == 1) {
orden = 0;
nuevo = paleta0;
paleta0 = paleta1;
paleta1 = nuevo;
resto = 1;
}
else {
orden = Math.floor(Math.random() * (paleta0.length - 1));
resto = orden % 2;
nuevo = paleta0.splice(orden, 1);
paleta1[paleta1.length] = nuevo;
}
if (resto == 0) {texto.style.color = ""+nuevo+"";}
else cartel.style.backgroundColor = ""+nuevo+"";
}
onload = carga;
</script>
<style type="text/css">
body {background-color: gray; }
#mrqsn {position: relative; width: 720px; height: 310px; border: 20px silver inset;
background-color: black; overflow: hidden; }
#cntnd {position: absolute; color: red; font: bold 66px arial, helvetica, sans-serif;
top: 6px; left: 6px; white-space : nowrap; }
#rejilla {position:absolute; background-color:transparent;
background-image:url('http://img204.imageshack.us/img204/5456/6x6esq.png'); }
</style>
</head>
<body>
<h2>Cartel LED's RGB.</h2>
<div id= "mrqsn"><span id="cntnd">Hoy es hoy</span>
<div id="rejilla"></div></div>
<img src="http://img204.imageshack.us/img204/5456/6x6esq.png"
border=2 alt="http://img204.imageshack.us/img204/5456/6x6esq.png">
</body>
</html>
Huelga decir que como la imagen es *.png (
) el canal alpha no se ve en
IE 6 y anteriores. Si hubiese puesto una *.gif sería mejor, pero ya había subido esa a imeiyiyak, y así se queda. (Espero que dure, porque ese servicio me está trayendo algunos problemas).
Agregué algunas animaciones con JS, para que se noten las posibilidades del efecto. Como —insisto— no usa caracteres "convertidos", podemos agregar los unicode para meter 'dibujitos', y hasta otras imágenes.
Por supuesto, aproveché para mostrar el día de la semana, que era el que nos estaba faltando; y dejo enlaces para hacerlo sin JS (como marquesina), de eventos para
marquee y de dibujitos unicode.
ayuda con marquee http://www.foro-virtual.com.ar/viewt...p?f=42&t=12059 http://www.foro-virtual.com.ar/viewt...=11516&start=0