How to Make Scrolling Banners on a Website


Multiple ways exist to create a banner with scrolling text. The simplest way to get an idea how the process works is to create a banner with a text editing program such as Notepad that is part of Windows. In Notepad you can create a short demonstration web page with scrolling capabilities using some HTML elements or scripting code such as JavaScript or VBScript. JavaScript is preferred because it is a bit more compatible with all browsers. With more sophisticated software, you can make scrolling images as well, but the complications of this process go beyond the scope of this article.

Things You'll Need

  • Windows Notepad or other text editing software
  • Create a basic scrolling banner by opening Notepad from the “Start” menu in Windows. The program is located in the “Accessories” group. In Notepad, type the following lines exactly as shown. This code creates a line of text that is read one character at a time and continually bumped to the right with the “substring” commands. The text then appears in a form placed on the web page at a banner position at the top of the screen. To make the text scroll slower, increase the number in the “setTimeout” line. Decrease this number to speed up the scroll. The background color (BGCOLOR) can be whatever color you desire.<br /><br /><html><br /><head><br />></head><br /><SCRIPT LANGUAGE=\"JavaScript\"><br />var scr = “ . . . . “ + \"These words will keep scrolling across the banner ....\"<br />function ScrollAlong() <br />{<br />temp = scr.substring(0,1)<br />GO<br />scr += temp<br />scr = scr.substring(1,scr.length)<br />GO<br />document.BannerScroll.Banner.value = scr.substring(0,55)<br />GO<br />setTimeout(\"ScrollAlong()\",100)<br />GO<br />}<br /></SCRIPT><br /><BODY BGCOLOR=\"#00FF00\" onLoad=\"ScrollAlong()\"><br /><form name=\"BannerScroll\"><br /> <div align=\"center\" ><br /> <input name=\"Banner\" type=\"text\" value=\"\" size=\"90\" /><br /> </div><br /></body><br /><html><br /><br />Save this file with a name of your choosing replacing the default “.txt” extension with “.HTML”. View the result by locating the file on your PC, clicking on “Open with” and choosing “Internet Explorer” or your preferred web browser.

  • Superimpose the scrolling text upon an image for a fancier look. This method places a table at the top of the web page. It then relies on the “Marquee” element and several other commands to control the direction, repeat delay and size of the scrolling text. Replace the image in the line that begins “<td background” with the file name and location of your desired image. Change the colors to whatever you want. Alter the “scrolldelay” and other controls to suit your text.<br /><br /><html><br /><head><br /></head><br /><body><br /><table width=\"500\" height=\"150\" border=\"2\" align=\"center\"><br /><tr><br /><td background=\"C:[use your own image here]” bgcolor=\"#FFFFFF\"><font size=\"4\" face=\"arial\" color=\"#000000\"><b><br /><marquee direction=\"right\" scrolldelay=\"200\"<br />behavior=\"scroll\" scrollamount=\"20\" width=\"700\" height=\"50\" loop=\"true\"><br />. . . This text will keep scrolling across the banner . . .<br /></marquee></b></font></td><br /></tr><br /></table><br /></body><br /></html><br /><br />Save the file and view it as in step 1.

  • Make the text scroll across the top of the image with a “Div” tag and increase the size with an “H2” tag. Change the code in step 2 as follows, then save and view as directed. <br /><br /><html><br /><head><br /></head><br /><body><br /><div><br /> <marquee direction=\"right\" scrolldelay=\"200\"<br />behavior=\"scroll\" scrollamount=\"20\" width=\"700\" height=\"50\" loop=\"true\"><br /> <h2>. This text will keep scrolling across the banner . . . </h2><br /> </marquee><br /><img src=\"[Insert the filename and location of your image]\" width=\"1000\" height=\"175\" /><br /></div><br /></body><br /></html>

  • Insert the banner code into your own web page when satisfied and upload it to your web host.

Tips & Warnings

  • The first version of this scroll code uses Active-X controls. Depending on your web browser security settings, you may get a prompt telling you Windows has blocked the running of the control and asking for permission to proceed. In this case it is safe to proceed since the file is on your own PC.<br /><br />Unless scrolling banners are changed frequently, for example with news reports, they may become boring for frequent visitors.
  • You must save these text files as HTML files or the scrolling banner process will not work.<br /><br />Not all web browsers support the Marquee element. Think about adding readable text as well.

Related Searches


Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!