Simple Scroller
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
var msg = "Replace this message with one of your own..... "
function scrollMsg(){
document.scrollerForm.welcomeMsg.value = msg
msg = msg.substring(1, msg.length) + msg.substring(0, 1)
setTimeout("scrollMsg()", 150)
}
//-->
</SCRIPT>
| |
<BODY ONLOAD="scrollMsg()">
<FORM NAME="scrollerForm">
<INPUT TYPE="text" NAME="welcomeMsg" VALUE="" size=30>
</FORM>
| |
Status Bar Scroller
~~ Look at Status Bar for results ~~
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
var statBarMsg = "Welcome to the Code 4 U Section of JSC."
+ " I hope you find something you like..... "
function scrollStatBarMsg(){
window.status = statBarMsg
statBarMsg = statBarMsg.substring(1, statBarMsg.length)
+ statBarMsg.substring(0, 1)
setTimeout("scrollStatBarMsg()", 150)
}
//-->
</SCRIPT>
| |
<BODY ONLOAD="scrollStatBarMsg()">
| |
Image Scroller #1
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
// Copyright 1998 by Ray Stott
// OK to use if this copyright is included
// Script available at http://www.crays.com/jsc
var image1
var image1a
function startImageScroll1(){
imgNo1 = firstImg1
image1 = new Image(20,20)
image1a = new Image(20,20)
image1.src = "img/scrollimg1.gif"
image1a.src = "img/scrollimg2.gif"
imageScroll1()
}
function imageScroll1(){
document.images[imgNo1].src = image1a.src
if(imgNo1>firstImg1)
document.images[imgNo1-1].src = image1.src
else
document.images[firstImg1+noImgs1-1].src = image1.src
if (++imgNo1==firstImg1+noImgs1)
imgNo1 = firstImg1
var timeoutID = setTimeout("imageScroll1()", 100)
}
//-->
</SCRIPT>
| |
<BODY ONLOAD="startImageScroll1()">
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
firstImg1 = 3 //set this to first image in group
noImgs1 = 12 //set this to the number to be displayed
for (var i=1; i<=noImgs1; i++){
document.write('<IMG src="img/scrollimg1.gif" height=30 width=30>')
//-->
</SCRIPT>
| |
Image Scroller #2
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
// Copyright 1998 by Ray Stott
// OK to use if this copyright is included
// Script available at http://www.crays.com/jsc
var image2
var image2a
function startImageScroll2(){
firstImg2R = firstImg2 + (noImgs2/2)
imgNo2L = firstImg2R - 1
imgNo2R = firstImg2R
image2 = new Image(20,20)
image2a = new Image(20,20)
image2.src = "img/scrollimg1.gif"
image2a.src = "img/scrollimg2.gif"
imageScroll2()
}
function imageScroll2(){
document.images[imgNo2R].src = image2a.src
document.images[imgNo2L].src = image2a.src
if(imgNo2R>firstImg2R){
document.images[imgNo2R-1].src = image2.src
document.images[imgNo2L+1].src = image2.src
}
else{
document.images[firstImg2+noImgs2-1].src = image2.src
document.images[firstImg2].src = image2.src
}
imgNo2L--
if (++imgNo2R==firstImg2+noImgs2){
imgNo2R = firstImg2R
imgNo2L = firstImg2R - 1
}
var timeoutID = setTimeout("imageScroll2()", 150)
}
//-->
</SCRIPT>
| |
<BODY ONLOAD="startImageScroll2()">
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
firstImg2 = 16 //set this to first image in group
noImgs2 = 14 //set this to the number to be displayed
for (var i=1; i<=noImgs2; i++){
document.write('<IMG src="img/scrollimg1.gif" height=30 width=30>')
}
//-->
</SCRIPT>
| |
Additional Information on These Scripts
Setting up the Image Scroller #1 and Image Scroller #2
scripts requires that you determine how many images appear on the page
prior to these scripts. This value is needed to set the first variable in
the portion of the code that goes into the body of the page. This variable is
firstImg1 for the Image Scroller #1 and firstImg2 for the Image Scroller #2.
If there are no other images prior to your script, then set this variable
to 0, the count for images on a page starts with 0. Otherwise count the
number of images that are on the page and set the value of this variable
to the results. For example on this page I have three images (the green
divider lines) prior to Image Scroller #1. So, I set the value of
firstImg1 to 3. The second variable, noImgs1 or noImgs2, can be set for the
number of images you would like to make up the scroller. In the case of
Image Scroller #2, this should always be an even number.
The images that I used for the image scrollers are displayed below.
You can use these or your own.
|
