<!--// Copyright 1996 - Tomer and Yehuda Shiran
// This example will appear in our forthcoming book on JavaScript.
// Feel free to "steal" this code provided that you leave this notice as is.
// Additional examples from the book can be found at http://www.geocities.com/SiliconValley/9000/
// For more information contact Tomer or Yehuda Shiran <yshiran@iil.intel.com>
// set messages

var messages = new Array()

messages[0] = "welcome to..."

messages[1] = "the scriptlibrary"

messages[2] = "the best script archive"

messages[3] = "on the net!"

messages[4] = "tons of great fun"

messages[5] = "thanks for visiting"

messages[6] = "enjoy the ride"

// set normal spacing between two characters (no whitespace inbetween)

var space = 1

// set height width of each character

var height = 5

var width = 3

// create object of all supported characters in font

var letters = new letterArray()

// initialize image variables

var on = new Image(5, 5)

var off = new Image(5, 5)

// set image URLs

on.src = "on.gif"

off.src = "off.gif"

// get number of images already layed out in page

var imageNum = document.images.length

// set maximum message length in characters

var boardWidth = 0

for (var i = 0; i < messages.length; ++i) {

var lengthWithNoSpaces = messages[i].split(" ").join("").length

var numberOfSpaces = messages[i].length - lengthWithNoSpaces

var currentBoardWidth = lengthWithNoSpaces * (width + space) - space + numberOfSpaces * space * 2

if (boardWidth < currentBoardWidth)

boardWidth = currentBoardWidth

}

// sign is currently not running

var running = false

var timerID = null

function letterArray() {

this.a = new Array(height)

this.a[0] = " * "

this.a[1] = "* *"

this.a[2] = "***"

this.a[3] = "* *"

this.a[4] = "* *"

this.b = new Array(height)

this.b[0] = "** "

this.b[1] = "* *"

this.b[2] = "**"

this.b[3] = "* *"

this.b[4] = "**"

this.c = new Array(height)

this.c[0] = "***"

this.c[1] = "*  "

this.c[2] = "*  "

this.c[3] = "*  "

this.c[4] = "***"

this.d = new Array(height)

this.d[0] = "** "

this.d[1] = "* *"

this.d[2] = "* *"

this.d[3] = "* *"

this.d[4] = "** "

this.e = new Array(height)

this.e[0] = "*** "

this.e[1] = "*  "

this.e[2] = "***"

this.e[3] = "*  "

this.e[4] = "***"

this.f = new Array(height)

this.f[0] = "***"

this.f[1] = "*  "

this.f[2] = "***"

this.f[3] = "*  "

this.f[4] = "*  "

this.g = new Array(height)

this.g[0] = "***"

this.g[1] = "*  "

this.g[2] = "***"

this.g[3] = "* *"

this.g[4] = "***"

this.h = new Array(height)

this.h[0] = "* *"

this.h[1] = "* *"

this.h[2] = "***"

this.h[3] = "* *"

this.h[4] = "* *"

this.i = new Array(height)

this.i[0] = "***"

this.i[1] = " * "

this.i[2] = " * "

this.i[3] = " * "

this.i[4] = "***"

this.j = new Array(height)

this.j[0] = "  *"

this.j[1] = "  *"

this.j[2] = "  *"

this.j[3] = "* *"

this.j[4] = "***"

this.k = new Array(height)

this.k[0] = "* *"

this.k[1] = "* *"

this.k[2] = "**"

this.k[3] = "* *"

this.k[4] = "* *"

this.l = new Array(height)

this.l[0] = "*  "

this.l[1] = "*  "

this.l[2] = "*  "

this.l[3] = "*  "

this.l[4] = "***"

this.m = new Array(height)

this.m[0] = "* *"

this.m[1] = "***"

this.m[2] = "***"

this.m[3] = "* *"

this.m[4] = "* *"

this.n = new Array(height)

this.n[0] = "* *"

this.n[1] = "***"

this.n[2] = "***"

this.n[3] = "***"

this.n[4] = "* *"

this.o = new Array(height)

this.o[0] = "***"

this.o[1] = "* *"

this.o[2] = "* *"

this.o[3] = "* *"

this.o[4] = "***"

this.p = new Array(height)

this.p[0] = "** "

this.p[1] = "* *"

this.p[2] = "** "

this.p[3] = "*  "

this.p[4] = "*  "

this.q = new Array(height)

this.q[0] = "***"

this.q[1] = "* *"

this.q[2] = "* *"

this.q[3] = "***"

this.q[4] = "***"

this.r = new Array(height)

this.r[0] = "** "

this.r[1] = "* *"

this.r[2] = "** "

this.r[3] = "* *"

this.r[4] = "* *"

this.s = new Array(height)

this.s[0] = "***"

this.s[1] = "*  "

this.s[2] = "***"

this.s[3] = "  *"

this.s[4] = "***"

this.t = new Array(height)

this.t[0] = "***"

this.t[1] = " * "

this.t[2] = " * "

this.t[3] = " * "

this.t[4] = " * "

this.u = new Array(height)

this.u[0] = "* *"

this.u[1] = "* *"

this.u[2] = "* *"

this.u[3] = "* *"

this.u[4] = "***"

this.v = new Array(height)

this.v[0] = "* *"

this.v[1] = "* *"

this.v[2] = "* *"

this.v[3] = "* *"

this.v[4] = " * "

this.w = new Array(height)

this.w[0] = "* *"

this.w[1] = "* *"

this.w[2] = "***"

this.w[3] = "***"

this.w[4] = "***"

this.x = new Array(height)

this.x[0] = "* *"

this.x[1] = "* *"

this.x[2] = " * "

this.x[3] = "* *"

this.x[4] = "* *"

this.y = new Array(height)

this.y[0] = "* *"

this.y[1] = "* *"

this.y[2] = "***"

this.y[3] = " * "

this.y[4] = " * "

this.z = new Array(height)

this.z[0] = "***"

this.z[1] = "  *"

this.z[2] = " *"

this.z[3] = "*  "

this.z[4] = "***"

this['!'] = new Array(height)

this['!'][0] = " * "

this['!'][1] = " * "

this['!'][2] = " * "

this['!'][3] = "   "

this['!'][4] = " * "

this[':'] = new Array(height)

this[':'][0] = "   "

this[':'][1] = " * "

this[':'][2] = "   "

this[':'][3] = " * "

this[':'][4] = "   "

this['.'] = new Array(height)

this['.'][0] = "   "

this['.'][1] = "   "

this['.'][2] = "   "

this['.'][3] = "   "

this['.'][4] = " * "

this['='] = new Array(height)

this['='][0] = "   "

this['='][1] = "***"

this['='][2] = "   "

this['='][3] = "***"

this['='][4] = "   "

this['='] = new Array(height)

this['='][0] = "   "

this['='][1] = "***"

this['='][2] = "   "

this['='][3] = "***"

this['='][4] = "   "

this['+'] = new Array(height)

this['+'][0] = "   "

this['+'][1] = " * "

this['+'][2] = "***"

this['+'][3] = " * "

this['+'][4] = "   "

this['-'] = new Array(height)

this['-'][0] = "   "

this['-'][1] = "   "

this['-'][2] = "***"

this['-'][3] = "   "

this['-'][4] = "   "

this['/'] = new Array(height)

this['/'][0] = "  *"

this['/'][1] = "  *"

this['/'][2] = " * "

this['/'][3] = "*  "

this['/'][4] = "*  "

this['\\'] = new Array(height)

this['\\'][0] = "*  "

this['\\'][1] = "*  "

this['\\'][2] = " * "

this['\\'][3] = "  *"

this['\\'][4] = "  *"

this['\\'] = new Array(height)

this['\\'][0] = "*  "

this['\\'][1] = "*  "

this['\\'][2] = " * "

this['\\'][3] = "  *"

this['\\'][4] = "  *"

this['"'] = new Array(height)

this['"'][0] = "* *"

this['"'][1] = "* *"

this['"'][2] = "* *"

this['"'][3] = "   "

this['"'][4] = "   "

this["'"] = new Array(height)

this["'"][0] = " * "

this["'"][1] = " * "

this["'"][2] = " * "

this["'"][3] = "   "

this["'"][4] = "   "

this['('] = new Array(height)

this['('][0] = "  *"

this['('][1] = " * "

this['('][2] = " * "

this['('][3] = " * "

this['('][4] = "  *"

this[')'] = new Array(height)

this[')'][0] = "*  "

this[')'][1] = " * "

this[')'][2] = " * "

this[')'][3] = " * "

this[')'][4] = "*  "

this['*'] = new Array(height)

this['*'][0] = "   "

this['*'][1] = "***"

this['*'][2] = "***"

this['*'][3] = "***"

this['*'][4] = "   "

this['?'] = new Array(height)

this['?'][0] = "** "

this['?'][1] = "  *"

this['?'][2] = " * "

this['?'][3] = "   "

this['?'][4] = " * "

this['0'] = new Array(height)

this['0'][0] = " * "

this['0'][1] = "* *"

this['0'][2] = "* *"

this['0'][3] = "* *"

this['0'][4] = " * "

this['1'] = new Array(height)

this['1'][0] = " * "

this['1'][1] = " * "

this['1'][2] = " * "

this['1'][3] = " * "

this['1'][4] = " * "

this['2'] = new Array(height)

this['2'][0] = "***"

this['2'][1] = "  *"

this['2'][2] = "***"

this['2'][3] = "*  "

this['2'][4] = "***"

this['3'] = new Array(height)

this['3'][0] = "***"

this['3'][1] = "  *"

this['3'][2] = "***"

this['3'][3] = "  *"

this['3'][4] = "***"

this['4'] = new Array(height)

this['4'][0] = "* *"

this['4'][1] = "* *"

this['4'][2] = "***"

this['4'][3] = "  *"

this['4'][4] = "  *"

this['5'] = new Array(height)

this['5'][0] = "***"

this['5'][1] = "*  "

this['5'][2] = "***"

this['5'][3] = "  *"

this['5'][4] = "** "

this['6'] = new Array(height)

this['6'][0] = "** "

this['6'][1] = "*  "

this['6'][2] = "***"

this['6'][3] = "* *"

this['6'][4] = "***"

this['7'] = new Array(height)

this['7'][0] = "***"

this['7'][1] = "  *"

this['7'][2] = " * "

this['7'][3] = "*  "

this['7'][4] = "*  "

this['8'] = new Array(height)

this['8'][0] = "***"

this['8'][1] = "* *"

this['8'][2] = "***"

this['8'][3] = "* *"

this['8'][4] = "***"

this['9'] = new Array(height)

this['9'][0] = "***"

this['9'][1] = "* *"

this['9'][2] = "***"

this['9'][3] = "  *"

this['9'][4] = "***"

}

function drawBlank() {

// assign greater than symbol to variable

var gt = unescape("%3e")

document.write('<TABLE BORDER=2 CELLPADDING=8' + gt + '<TR' + gt + '<TD WIDTH=468 BGCOLOR ALIGN="center" VALIGN="center"' + gt)

// print entire board of off images

for (var y = 0; y < height; ++y) {

for (var x = 0; x < boardWidth; ++x) {

document.write('<IMG SRC="' + off.src + '" HEIGHT=5 WIDTH=5' + gt)

}

document.write('<BR' + gt)

}

document.write('</TD' + gt + '</TR' + gt + '</TABLE' + gt)

}

function setLight(state, x, y) {

// set a specific light in sign to on (true) or off (false)

if (state)

document.images[computeIndex(x, y)].src = on.src

else

document.images[computeIndex(x, y)].src = off.src

}

function drawLetter(letter, startX) {

// draws a letter at the given x coordinate

for (var x = 0; x < width; ++x) {

for (var y = 0; y < height; ++y) {

setLight(letters[letter][y].charAt(x) == "*", startX + x, y)

}

function drawSpace(startX) {

// create a small space between each two characters

for (var x = 0; x < space; ++x) {

for (var y = 0; y < height; ++y) {

setLight(false, startX + x, y)

}

function computeIndex(x, y) {

// compute the document index of an image in the sign, based on the x-y coordinates

return (y * boardWidth + x) + imageNum

}

function floodBoard(startX) {

// set all lights from startX to off

for (var x = startX; x < boardWidth; ++x) {

for (var y = 0; y < height; ++y) {

setLight(false, x, y)

}

function drawMessage(num) {

// initialize variable to current message

var text = messages[num]

// initialize two counters (j - current character in message, i - current x coordinate)

var i = 0

var j = 0

while (1) {

if (text.charAt(j) != " ") {

// draw current letter

drawLetter(text.charAt(j), i)

// increment i by the constant width of an image

i += width

}

else {

// add an extra space (do not advance j yet)

drawSpace(i)

i += space

}

// if j is less that index of last character

if (j < text.length - 1) {

drawSpace(i)

i += space

}

else

// j is the index of the last character (lsat character already printed)

break

// increment j by one because one letter was printed

++j

}

// flood the remaining piece of the sign (turn it off)

floodBoard(i)

// if message printed this time was not the last one in the array

if (num < messages.length - 1)

// val *must* be a global variable for use with the timeout

val = ++num

else

val = 0 // start cycle over again

// recursive call after waiting 3 seconds (some of the time already passed during printing)

timerID = setTimeout("drawMessage(val)", 3000)

}

// open form

document.write('<FORM>')

// create initial sign (all sign is off)

drawBlank()

function startSign() {

// wait 3 seconds and then call function to print first message

drawMessage(0)

running = true

}

function stopSign() {

if(running)

clearTimeout(timerID)

running = false

}

document.write('<INPUT TYPE="button" VALUE="start" onClick="startSign()">')

document.write('<INPUT TYPE="button" VALUE="stop" onClick="stopSign(); floodBoard(0)">')

document.write('</FORM>')

// -->

</SCRIPT>

2. Modify the text (using lowercases letters only) to change out what message appears on the script.

3. Save these two GIFs:

on.gif:
off.gif:

For Banner Hunters,
Backgrounds By Category.
Free To Use.

Banner Advertising: Selection of scripts for banners, scrolling text, marquees creation and other ways of handling text.

LED Sign:

A clean LED sign that is very easy to customize. Looks like an old led display with green dots on black background. I'm glad that you do not need any assembler programing to make it works. Good for following browsers: IE4, IE5, NS4+ Download - just use the script from below. Demo More Details

o install this script, follow these simple steps:

Banner Advertising:
Selection of scripts for banners, scrolling text, marquees creation and other ways of handling text.

A clean LED sign that is very easy to customize. Looks like an old led display with green dots on black background. I'm glad that you do not need any assembler programing to make it works.
Good for following browsers: IE4, IE5, NS4+
Download - just use the script from below.
Demo More Details