HTML Goodies: Script Tip: Week 34
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
New script today! Again, this one is by request. It's a random banner script. I wrote this one so feel free to use it. The script uses two arrays and five images to get its effect. The script posts a random banner. What's more, the banner is active. You can click on it to go where the banner reads. It's a quick script that can be used in myriad ways.
I have every intention of doing this entire script in this one lesson. It's all review. I'll offer links to other Script Tips in case some of this is new to you, but other than that we'll roll through this one pretty quickly.
You'll need to hit reload a few times and put your pointer on top of the new banner to see the entire effect.
This one shouldn't take us too long. There's nothing new here. Each little section has been covered in another Script Tip, but after 33 tips, it's probably a good idea to roll through a script with lots of familiar coding and see how that coding could be used to make something different than before. It is, dare I say, a review?
banners = new Array()
banners="<IMG BORDER=0 SRC=banner0.gif>"
banners="<IMG BORDER=0 SRC=banner1.gif>"
banners="<IMG BORDER=0 SRC=banner2.gif>"
banners="<IMG BORDER=0 SRC=banner3.gif>"
banners="<IMG BORDER=0 SRC=banner4.gif>"
GoTo = new Array()
The script starts off with two arrays. I go over arrays pretty hard in Script Tip 31.
The first array, named banners, is a series of five images. Those are our banners. They look like this, banner0.gif through banner4.gif:
Notice that there are double quotes surrounding each indexed item so we know each is to be handled as if it were just simple text. Notice also that there are no quotes around the zero or the name of the image. That would mess up the script by stopping the line too early. Error.
The second array contains the URLs that will match the banners. Note that the URLs are in the same order as the banners. That way, we can use the same number to call for an element from each array. For example, the first banner reads "HTML Goodies Home Page." The first GoToarray item is the URL for HTML Goodies. Now we can use the number zero to return both the Goodies banner and the Goodies URL. With me?
The Random Number
var Number = Math.round(4 * Math.random());
Remember that code from Script Tip 16? The variable numberis assigned a random number between zero and four.
That number is created by multiplying 4 times a random number between 000 and 999 created by the "Math.random" commands. The numbers returned can be 0, 1, 2, 3, or 4. The "Math.round" object.method statement makes sure the number is rounded off so there are no remainders in the result.
Calling for the Array Index
var TheLink = GoTo[Number]
var TheImage = banners[Number]
Two new variable names are created. TheLink represents the text return from the GoTo array. The variable TheImage represents the return from the bannersarray.
In both cases, the same number, the random number we created earlier, is used to choose the item from both arrays. That way we know all the banners/URLs will line right up.
Write It To The Page
document.write("<CENTER><A HREF=" +TheLink+ ">" +TheImage+ "</A></center>")
We're using a document.write() statement to get it to the page. Notice the A HREF command is fully built. We're just filling in the blanks. The two text strings from the arrays are placed and the entire line of HTML is centered.
When the page displays, the banner is centered on the page and it's active to the URL it is representing.
Now -- What Would You Do?
See how I've taken parts from other scripts and built something new? You can do that. Using just what's on this page you could make a random line of text come up on your page, or use a function to enact the script so it offers random fortunes, like the Magic 8-Ball. You can do it.
Next Week: Scrollin' Scrollin' Scrollin'