Main Home Further Reading Awards Linking Methods Credits

Stationery Introduction 4FAQ FAQ Contents Keyboard Shortcuts OE Setup How do I load Stationery Using Winzip Required Programs Arach Toolbars FrontPage Toolbars FP Express Toolbars How do I save How do I make Stationery 4All about Fonts Setting the Default Embed Fonts OE4 Embed Fonts OE5 4How do I use sound Outlook Express 4 Outlook Express 5 Changing Sounds (OE4) Timing Sounds (OE4) Multiple Sounds(OE4) Background Scroll Java Applets Top Borders Tables Marquees Signatures Links

Graphics 4Paint Shop Pro Contents Introduction Glossary Keyboard Shortcuts Toolbar Buttons Toolbar Buttons 2 Tubes Layers Basic Stationery Transparent GIFs Drop Shadows Adding Text Gradients Textures Seamless Tiles Masks Making Masks Button Frame Divider Bars 4Image Composer Contents Introduction Keyboard Shortcuts Toolbar Buttons Toolbar Buttons 2 Effects Palette Texture Transfer Palette

Download Downloads Page Arach Toolbars FP Toolbars FPE Toolbars EOT Files EOT Files Set 2 4Stationery (for OE 4) Previews Pat Walker Set 1 Pat Walker Set 2 Pat Walker Set 3 Pat Walker Set 4 T.E. Brewer 1 Joe Cilinceon Set 1 Joe Cilinceon Set 2 Night Raven Set 1 Night Raven Set 2 Night Raven Set 3 Night Raven Set 4 Sven Set 1 Sven Set 2 Sven Set 3 4Stationery (for OE 5) Coming Soon Troubleshooter Colour Previewer

Utility Troubleshooter Colour Preview Currency Converter

Toolbars 4Arach About Download Instructions 4FrontPage About Download Instructions 4FP Express About Download Instructions Feedback

Newsletter About Subscribe Archive

Community Discussion Forum 4Free Email About Login Sign Up Survey Retrospect Sign the Guestbook Read the Guestbook Answering Machine ICQ Group FeedBack Send Me Mail

Game Duck Hunt

Other Tech Fonts Chelle Games

Click the logo to add
this site to your Favourites

Search:

This Site The Web

Quick Links

Subscribe to my Newsletter

Books presented in association with:

Your Free E-Mail
Account:

   

Send me mail!

Background Scroll

Introduction
The script
How to use it
How it works
Scrolling a 2nd image
Stopping the scroll
Known issues

Compatibility:  The script detailed on this page works in both OE4 and OE5.

Introduction:

One of the most popular effects employed in stationery has always been that of the "Background Scroll".  This script, takes the background image of your stationery and makes it scroll across the screen.  Much of the stationery you can download from various websites include a version of this script.

Unfortunately the release of Outlook Express 5 has caused a problem with the use of this script.  It doesn't display properly in OE5, instead of scrolling - it "strobes".  While that may sound like a neat effect, believe me it is actually very annoying to see.  Fortunately there is a new script available that works in both OE4 and OE5, while this does mean that all existing stationery will need to be changed to be compatible this is a worthwhile endeavour as the new script is a little more flexible than the old one anyway.

The Script:

<!--VERMEER BOT=HTMLMarkup alt="[<b>This is the OE4/OE5 Scroll Script</b>]" StartSpan -->
<table id="imageholder" cellspacing="0" style="LEFT: -1px; POSITION: absolute; TOP: -1px; Z-INDEX: -2;"><tr><td id="cell"></td></tr></table>
<SCRIPT language=VBScript>
<!--
option explicit
dim direction, scrollType, sizew, sizeh, nail, source, tall, wide, version, tile
dim max, axis, placement, reset, temp, temp2, MoveItY, MoveItX, numfond, id

rem *************** STUFF YOU CAN CHANGE *******************

direction="up"     ' change the direction of the scroll here: "up" or "left" or "down" or "right"
scrollType="full"    ' change the type of scroll here: "full" to scroll the entire background (tiles your image), "border" to just scroll a margin
sizew=10     ' **** IMPORTANT **** enter the width of the scrolling image here
sizeh=10     ' **** IMPORTANT **** enter the height of the scrolling image here
source=document.body.background    ' tell the script which image to scroll

rem ********************************************************

nail=0
tall=((screen.height\sizeh)+1)*3
wide=(screen.width\sizew)+1
version=mid(navigator.appVersion,23,1)
direction= Lcase(direction)
scrollType=Lcase(scrollType)

sub setUp()
    if scrollType="full" then
        tile=wide
    else
        tile=1
    end if

    if direction="up" then
        max=tall
        axis=sizeh
        placement=1
        reset=1
    elseif direction="left" then
        max=wide
        axis=sizew
        placement=1
        reset=1
    elseif direction="down" then
        max=tall
        axis=0
        placement=-sizeh
        reset=-sizeh
    elseif direction="right" then
        max=wide
        axis=0
        placement=-sizew
        reset=-sizew
    end if

    if version="4" and source=document.body.background then
        MoveItY=0
        MoveItX=0
        if direction="down" then
            MoveItY=-(sizeh*15)
        elseif direction="right" then
            MoveItX=-(sizew*15)
        end if
        numfond=document.body.sourceIndex
        scroll4
    else
        for temp=0 to max
            if direction="up" or direction="down" then
                for temp2=1 to tile
                    cell.insertAdjacentHTML "beforeEnd", "<img id=pics src=" & source & ">"
                next
                cell.insertAdjacentHTML "beforeEnd", "<br>"
            elseif direction="left" or direction="right" then
                for temp2=1 to tile
                    cell.insertAdjacentHTML "beforeEnd", "<img id=pics src=" & source & ">"
                next
                if scrollType="full" then
                    cell.insertAdjacentHTML "beforeEnd", "<br>"
                end if
            end if
        next
    end if

    if source=document.body.background and version <> "4" then
        document.body.background=" "
    end if
end sub

sub scroll4()
    if nail=1 then
        exit sub
    end if
    if direction="up" then
        MoveItY=MoveItY-1
        MoveItX=MoveItX+0
    elseif direction="left" then
        MoveItY=MoveItY+0
        MoveItX=MoveItX-1
    elseif direction="down" then
        MoveItY=MoveItY+1
        MoveItX=MoveItX+0
    elseif direction="right" then
        MoveItY=MoveItY+0
        MoveItX=MoveItX+1
    end if
    Document.all(numfond).style.BackgroundPosition= MoveItX & " " & MoveItY
    id=SetTimeOut("scroll4", 100,"VBScript")
end sub

sub scroll()
    if nail=1 then
        exit sub
    end if
    if placement < axis then
        setTimeout "move", 1
    else
        placement=reset
        setTimeout "move", 1
    end if
end sub

sub move()
    if direction="up" then
        imageholder.style.top=-placement
    elseif direction="left" then
        imageholder.style.left=-placement
    elseif direction="down" then
        imageholder.style.top=placement
    elseif direction="right" then
        imageholder.style.left=placement
    end if
    placement=placement+1
    setTimeout "scroll", 1
end sub

sub hotspot_OnMouseover()
    stopIt.style.width=40
    stopIt.style.height=40
    hotspot.style.width=0
    hotspot.style.height=0
    if nail=1 then
        stopIt.value="Start"
    else
        stopIt.value="Stop"
    end if
end sub

sub stopIt_OnMouseout()
    stopIt.style.width=0
    stopIt.style.height=0
    hotspot.style.width=40
    hotspot.style.height=40
end sub

sub stopIt_OnClick()
    if nail=0 then
        nail=1
    else
        nail=0
    end if
    if version="4" and source=document.body.background then
        scroll4()
    else
        scroll()
    end if
end sub

sub window_OnLoad()
    setUp
end sub

setTimeout "scroll", 5000
-->
</SCRIPT>
<input type="button" id="stopIt" value="" style="left: 0; position: absolute; top: 0; z-index: 999; width: 0; height: 0; cursor: hand;" title="Click here to Stop or Restart the scroll">
<div id="hotspot" style="left: 0; position: absolute; top: 0; width: 40; height: 40; z-index: 999;"></div>
<font color="#FF0000" face="Arial" size="2" style="Display: none"><b><-- Scroll Script</b></font>
<!--VERMEER BOT=HTMLMarkup EndSpan -->




How to use it:

Okay, so I've shown you the script, now what the heck do you do?  The script shown above is  indented to increase it's readability - as such it is intended "for display purposes only".  To get a fully functional copy of the script for your use, click here to download a script "template". 

The zip file you just downloaded contains a single file - bgscrollscript.txt.  Unzip this file somewhere and open it with Notepad or your favourite text editor.  Select the entire script and paste it into the HTML document that you wish to add this script into.

If you use a graphical HTML editor  - to use that script and have it work, it must be pasted into the HTML view of your editor.  If you paste it into the regular view of such a program it will not work.  Congratulations, you now have a background scroll script added to your stationery. 

As you've probably surmised, users of my various toolbars needn't bother with downloading the above file - just use the appropriate feature in the toolbars.

There are a couple of things you need to do to the script in order to have it work properly.  Locate the *** STUFF YOU CAN CHANGE *** section near the top of the script:

rem *************** STUFF YOU CAN CHANGE *******************

direction="up"     ' change the direction of the scroll here: "up" or "left" or "down" or "right"
scrollType="full"    ' change the type of scroll here: "full" to scroll the entire background (tiles your image), "border" to just scroll a margin
sizew=10     ' **** IMPORTANT **** enter the width of the scrolling image here
sizeh=10     ' **** IMPORTANT **** enter the height of the scrolling image here
source=document.body.background    ' tell the script which image to scroll

rem ********************************************************

The first thing to change is the direction in which the scroll travels.  As you can see above, the options are "up", "down", "left", or "right".  Just fill in the appropriate direction in the Direction=" " statement in the script.

Next, you need to specify the type of scroll that you wish to have, either "full" or "border".  The Full option will cause a small image to tile and fill the entire screen,the Border option will create only a single row of images along the margin indicated by the scroll direction.  With a large image which already fills the screen either option may be used - it won't make much difference.   Please note: this option really only affects OE5 users.  In OE4 the tiling will be determined by the options set in the style sheet for the stationery.  OE4 users should still be sure to set this option in the script however so that their stationery will work properly when viewed by OE5 users.

Now comes the most important part, in order to scroll properly the script needs to be told how big your scrolling image actually is.   You indicate the size of the image to the script in the following two lines:

sizew=10    ' enter the width of the scrolling image here
sizeh=10    ' enter the height of the scrolling image here

Simply enter the actual dimensions of your image where indicated.  As you can see above, I set the default size to 10 pixels. This was done so that if you forget to set the dimensions, it will be immediately apparent when you preview your work.

Many people have asked how to determine the size of their image, here's a couple of ways to go about it:

If you have IE5 and the Images list extension, you can load any image into IE, then right-click and pick Image list. In the resulting window the size of your image will be reported.
 
Any image editor worth it's salt will tell you how large your image is.  MIC reports this on the Status bar, I don't know where PSP or other editors display this info but it's gotta be there somewhere.
 
In FP98 or FPE, insert your image (as an image, not a background) then Right-Click | Image Properties then on the Appearance tab you can see the size of the image.
 
In Arach, if the filename meets the criteria (one word) you can use the Tools |   Calculate Graphic Size option to find this info.

How it works:

Unlike the old OE4 scroll script this one does not actually cause the background of your image to move - that's what causes the problem in OE5, so this one needs to do something a little different in order to work properly.

What it does is check to see what the background of your stationery is,  it then takes that image and creates a new layer of images over top of the original background and scrolls the new layer.  It also erases the original background image.

Unfortunately such an approach uncovered a few previously unknowns bugs in OE4, so this latest version of the scroll actually incorporates both the old OE4 scroll and the newer OE5 routine. As it operates, it detects which version of OE you have and scrolls using the appropriate one.

Scrolling a 2nd image:

Another effect you can achieve with this script is to cause a 2nd image to scroll over the background image.

To do this, insert another image just before the script, set the style to Display: none, and be sure to give the image an ID so that the script can work with it:

<img id="tempImage" src="YOUR IMAGE HERE" style="Display: none">

Insert that just before the script itself, so just above the line which starts with:

<!--VERMEER BOT=HTMLMarkup alt="[<b>This is the OE4/OE5 Scroll Script</b>]" StartSpan -->

As noted above, the src attribute is the location where you specify which image to use.  So if you wish to use  the file example.gif which is in your c:\graphics folder, the src would looks like this:   src="c:\graphics\example.gif".

The id attribute is where you give your image a name so that the script can find this image in order to work with it later.  This name can be anything you like, just make sure that what ever you call it you use the same name later in the script.

Finally the style="Display: none" bit is very important. Without it, you will have an extra copy of your image showing in your finished stationery which doesn't scroll and takes up valuable screen space.

Now that our second image is inserted, modifying the script to work with this new image is a very simple matter, requiring only two small changes.  For starters, the script needs to be told which image you want to have scroll, so find the following line in the code:

source=document.body.background     ' tell the script which image to scroll

As you can see, by default, the script makes use of the background image of the script, in order to scroll a second image, you need to tell the script where it is. You do this by altering the line above to point at the src attribute of your newly inserted image, called "tempImage" in our example:

source=tempImage.src     ' tell the script which image to scroll

that is, set the source in this line equal to the name you gave your second image inserted above in the id attribute and then add a .src to the end of the name.

So if our second image was given a id of   "Fred" and the image itself is flintstone.gif, the two lines would look something like this:

<img id="Fred" src="c:\graphics\Flintstone.gif" style="Display: none">

source=Fred.src     ' tell the script which image to scroll

The last change to make when scrolling a 2nd image is that you probably wish to se the background under the 2nd image so set the scroll type to Border, see above.

Stopping the Scroll:

As popular as this effect is, there are also lots of people who don't like it and find the scrolling annoying.  To help out these people I have included in the script a routine that will enable them to stop the scroll if they wish to do so.

When you move the mouse over the top left corner of the stationery, a button will appear.  A click on this button will stop the scroll.   When you move the mouse away the button disappears again.  Another such click will restart the scroll.

Known Issues:

A very common problem is that the scroll sometimes appears all "jerky" and does not move properly.  This is almost always caused because you forgot to set the dimensions of the scrolling image in the script.   To rectify this, simply tell the script how big your image is, see the How to use it section above for instructions on doing this.

If you write a very long message, or use a large font, you may occasionally notice that a left-border scroll will "run out", the scrolling image will stop, and you'll see the background colour of the document.  If this happens a lot, you can adjust the script so that it gives you more room to write.   Find this line:

tall=((screen.height\sizeh)+1)*3

then simply change the multiplier value at the end:

tall=((screen.height\sizeh)+1)*4

I would recommend only increasing this in 1 digit increments until you find a length which is right for you.

Finally, for some strange reason, this script insists on being placed first in the code, if you put any scripts in place before this one, it'll produce a script error - I'm working on this issue.