Show me the entire source code
Here is the entire source code for the script, all in one piece:
<html>
<head>
<script>
/*
Dot Matrix Scroller - by RayM 06-01-00
For tutorial and full source, see http://javascriptkit.com/javatutors/matrixscroll
*/
var imagepath="" //specify the directory where the images are in ie:
"images/"
var text="Welcome to JavaScript Kit"; // text string to display
var nc=8; // number of display cells
var spd=130; // scroll speed in msec (default=130)
var count=0; // counter for one whole loop (offset loop)
var offs=0; // starting pos of substring
//preload images routine (By javascriptkit.com)
var preloadimages=new Array()
for (p=32;p<=163;p++){
preloadimages[p]=new Image()
preloadimages[p].src=imagepath+p+".gif"
}
function startscroll() { // update scrolling display every 130 msec
action=window.setInterval("go()",spd);
}
function go() { // main loop. done every 130 msec
strd=text.substr(offs,(count+1)); // get substring
var str=strd.substr(0,nc); // no longer than 21 chars (no. of cells)
if (count>(nc-2) && str.length<nc) { // if text has reached left side, start
chopping off
var se=(nc-len); // how many spaces to add at end, if any
while (str.length<nc) {
str=str+" "; // pad out end with spaces
se+=1;
}
}
len=str.length; // get length of substring
var c=0; // counter for display characters sub-loop
while (c<len) { // do for all characters in this substring
r=str.substr(c,1); // select a single char from this sub-string
g=r.charCodeAt(0); // get ascii code of this char
chr=eval('document.c'+((nc+1)-len+c)); //
chr.src=imagepath+g+".gif"; // display picture
c+=1; // inc char counter
}
count+=1; // inc this when done one whole loop
if (count>=nc) {
offs+=1;
}
if (count>(text.length+(nc-1))) { // wrap at end
count=0;
offs=0;
}
}
</script>
</head>
<body onload="startscroll();">
<img src="32.gif" width="28" height="38"
name="c1">
<img src="32.gif" width="28" height="38"
name="c2">
<img src="32.gif" width="28" height="38"
name="c3">
<img src="32.gif" width="28" height="38"
name="c4">
<img src="32.gif" width="28" height="38"
name="c5">
<img src="32.gif" width="28" height="38"
name="c6">
<img src="32.gif" width="28" height="38"
name="c7">
<img src="32.gif" width="28" height="38"
name="c8">
</body>
</html>
-Tutorial introduction
-How it works
-Show me the entire script source
-Show me step by step
how to add the scroller to my site
