This is a really good JAVA script – if you’re looking for a streaming horizontal banner. And, it can be adapted to display more than the three images in the original script as well as made to display larger sized images in a larger banner container. (Click the image to see this script in action.)
You’ve heard me mention before that you can find good free JAVA Scripts at http://javascript.internet.com/. You’ve also heard me say that you need to know a bit of how JAVA is constructed to be able to use the scripts and modify them when necessary.
Such is the case with this script. Needed to make an update to a client’s page last week. Found exactly the look they requested; however, the script did not fit what the client wanted which was to display five large pictures (no hyperlinks) in a streaming horizontal banner. (The original script is written for three smaller-sized images with links to off-site webpages.)
After working through the changes, thought it might be helpful to others to see what parts of the script need to be changed. So we’re going to take a look at the changes I made to display five images in a larger banner. For purposes of our discussion, we will be addressing only those portions of the script that affect the size and number of images used and how they are displayed.
To view the original script in it’s entirety, visit http://javascript.internet.com/. From the JAVA Script home page menu; click on Image Effects; then search for Streaming Horizontal Banner by Jeroen Haan. To access the script code, click on the script’s Title link. This will open a page with four tabs:
- General – Description and sample streaming banner
- Notes – Creation info and short code to insert on the HTML page if you are having a problem with it working in the browser.
- Source code – Four tabs with External Files, CSS, Head and Body codes
- User comments – See what others have to say and if you’re having trouble. . .good place to ask for help.
You may find it helpful to view the whole script and get a little familiar with it before continuing with the information below.
The Source Code
We will be covering the four parts of the source code as this is what you will need to implement to use this script.
1. External Files – Paste this code into an external JavaScript file named . .
streamingBannerHorizontal.js
. . . and upload to the website’s root directory. (This script can be used without any changes, if you will be using three images that do not exceed 124 pixels in width with a maximum height of 60 pixels.)
2. CSS – Paste this code into your external CSS file OR in the <style> section within the HEAD section of your HTML document.
#slideCont {
border:solid 1px #000;
text-align:center;
}
#slideCont img {
margin: 5px;
}
Explanation: The #slideCont{ portion sets the banner border to a 1 pixel solid line in black. It also centers the banner. The second bit of code – #slideCont img { – places a 5 pixel margin between the images.
3. HEAD – Paste this code into the HEAD section of your HTML document.
<script type=”text/javascript” src=”streamingBannerHorizontal.js”></script>
Notice that the “src=….” is the same name as the External File name you uploaded to the website’s root directory.
4. Body – Paste this code into the BODY section of your HTML document where you want the banner to appear. If using the original script with its three images sized 126 x 60 pixels fits your requirements, then in the following code the only changes you would need to make would be to change the image names and the hyperlinks.
<div id=”slideCont” style=”position:relative;z-index:1;width:425px;height:90px;top:0px;overflow:hidden;”>
<div id=”slideA” style=”position:absolute;z-index:1;top:0px;left:0px;width:850px;height:90px;overflow:hidden;”>
<div style=”float:left” id=”innerSlideA”>
<a href=”http://www.apache.org/“><img src=”apache.gif” width=”126″ height=”44″ border=”0″></a>
<a href=”http://www.haan.net“><img src=”banner_haan_net_en.gif” width=”120″ height=”60″ border=”0″></a>
<a href=”http://www.mysql.com/“><img src=”mysql.gif” width=”126″ height=”44″ border=”0″></a>
</div>
<div id=”slideB” style=”position:relative;z-index:1;top:0px;left:0px;width:425px;height:90px;overflow:hidden;”>
<a href=”http://www.apache.org/“><img src=”apache.gif” width=”126″ height=”44″ border=”0″></a>
<a href=”http://www.haan.net“><img src=”banner_haan_net_en.gif” width=”120″ height=”60″ border=”0″></a>
<a href=”http://www.mysql.com/“><img src=”mysql.gif” width=”126″ height=”44″ border=”0″></a>
</div>
</div>
</div>
To use the code shown above with your own images and links, you would need to make changes to the following three (3) lines of code (replacing the script’s original hyperlinks and images with your own. The lines of code to be replaced – in both “div A and B” – with your own images and links are shown in red.)
<a href=”http://www.apache.org/“><img src=”apache.gif” width=”126″ height=”44″ border=”0″></a>
<a href=”http://www.haan.net“><img src=”banner_haan_net_en.gif” width=”120″ height=”60″ border=”0″></a>
<a href=”http://www.mysql.com/“><img src=”mysql.gif” width=”126″ height=”44″ border=”0″></a>
Note: The three lines of code for links and images in the <div style=”float:left” id=”innerSlideA”> need to be the same as those in the <div id=”slideB” …. code. If these three lines of code are not the same in both places, this script will not work properly.
To use this code without having to change the image sizes or any of the other code, you would need to have your images be the exact same size as those shown, i.e, image corresponding to apache.gif image would have to be 126 x 44 pixels, etc. If your three images are different in size, you can change the width and height specifications – but do not exceed the maximum size of 124 x 60 pixels for any image since the banner container is set to display for three images of that size.
Don’t want the hyperlinks? You can use this script without hyperlinks by deleting the <a href=” “> </a> code from each line in both groups.
Once you have your images in place (with or without hyperlinks), upload everything – the external file, all images, CSS file (if using) and HTML document – to see the script in action.
Want more images? Larger images?
This can be accomplished with a few changes.
Note: Only the portions of the script that will be affected by increasing the number of larger images to be displayed has been shown. For the script to work, you would need to replace the original portions with the corresponding portions containing the changes you made.
There are 2 portions of the script that will require changes. Those two changes will be made to the code contained in the External Files and Body.
EXTERNAL FILES CODE TO CHANGE:
function clip() {
// width of the banner container
var contWidth = 425;
// height of the banner container
var contHeight = 90;
}
setTimeout(clip,25)
}
….. the above portion of the original code defines the following:
function clip() { – the width of the banner container, in this case 425 pixels,
the height of the banner container, in this case 90. (Since the maximum height is 60 pixels, using 90 pixles gives you extra space on top and bottom of the images.)
setTimeout(clip,25) – is the ‘speed’ at which the banner will stream.
Experiment with changing the 25 – up or down – to see how it affects the streaming of the uploaded HTML document. Once you have a speed you like, leave that number in.
To make changes to the script, you would want to do the following:
1. Change the var contWidth = 425; – For our discussion, we want our banner container to be 600 pixels. Making that change would result in the code looking like
var contWidth = 600;
2. Change var contHeight = 90; to accommodate our images that are 150 pixels in height - To do this you will need to calculate the total space required. This calculation is figured by adding together the height of the largest image PLUS the extra pixel space above and below. Let’s say our largest picture is 150 pixels in height and we want to have 10 pixels above and 10 pixels below – (150 + 10 + 10 = 170) – our code would now look like
var contHeight = 170;
For our sample, the corrected code would look like:
function clip() {
// width of the banner container
var contWidth = 600;
// height of the banner container
var contHeight = 170;
}
setTimeout(clip,25)
}
BODY CODE
To use additional and larger images, there are three (3) parts that need to be changed in the following code. Remember, what you change in the <div id=”slideA” line of code must also be changed in the <div id=”slideB” portion as well.
For our sample, we’ll assume we have five (5) images. We want these images to display in the 600 pixel wide banner container as shown in our External Files Code, with all our images being 200 pixels wide and 150 pixels high. We will not address any of the other code shown here.
To make understanding what we’re changing easier, the code we will be changing is highlighted in red. We’re using absolute links for our images and we’ll not be hyperlinking any of the images.
<div id=”slideCont” style=”position:relative;z-index:1;width:600px;height:170px;top:0px;overflow:hidden;”>
<div id=”slideA” style=”position:absolute;z-index:1;top:0px;left:0px;width:1200px;height:170px;overflow:hidden;”>
<div style=”float:left” id=”innerSlideA”>
<img src=”http://www.yourdomain/yourpicture1.gif” width=”200″ height=”150″ border=”0″>
<img src =”http://www.yourdomain/yourpicture2.gif” width=”200″ height=”150″ border=”0″>
<img src=”http://www.yourdomain/yourpicture3.gif” width=”200″ height=”150″ border=”0″>
<img src=”http://www.yourdomain/yourpicture4.gif” width=”200″ height=”150″ border=”0″>
<img src=”http://www.yourdomain/yourpicture5.gif” width=”200″ height=”150″ border=”0″ >
</div>
<div id=”slideB” style=”position:relative;z-index:1;top:0px;left:0px;width:1200px;height:170px;overflow:hidden;”>
<img src=”http://www.yourdomain/yourpicture1.gif” width=”200″ height=”150″ border=”0″>
<img src =”http://www.yourdomain/yourpicture2.gif” width=”200″ height=”150″ border=”0″>
<img src=”http://www.yourdomain/yourpicture3.gif” width=”200″ height=”150″ border=”0″>
<img src=”http://www.yourdomain/yourpicture4.gif” width=”200″ height=”150″ border=”0″>
<img src=”http://www.yourdomain/yourpicture5.gif” width=”200″ height=”150″ border=”0″>
</div>
</div>
</div>
Explanations of changes:
<div id=”slideA”, Line 1:
width:600px – banner size container – this must be the same as in the External Files Code
;height:170px – maximum height of banner container (max. height of image + number of pixels above and below)
<div id=”slideA”, Line 2:
width:1200 – this is the amount of space allowed for ALL images to display including images and number of pixels for margins. (This number will vary depending on the size and number of images that you use. As a rule of thumb try using the width of the container banner x 2. )
;height:170px – maximum height of banner container (max. height of image + number of pixels above and below)
<div id=”slideB”, Line 1
;width:1200px – this is the amount of space allowed for ALL images to display including width and number of pixels for margins, must be same number as in Line 2 of <div id=”slideA”,
height:170px – maximum height of banner container (max. height of image + number of pixels above and below), must be same number as in Line 1 and Line 2 of <div id=”slideA”,
Making these changes to the original script will allow our Horizontal Streaming Banner to display five (5) images (200×170 pixels in size) in a banner container of 600 pixels with a 5 pixel margin.
This code can be used for personal pictures, graphics, or affiliate images that you want to make an active link.
If you have never used JAVA scripts before, you might find it helpful to create a dummy HTML document for testing purposes before you try and put this script into the actual page where you want to use it. It is much easier to find and fix mistakes if you don’t have to sift through lines and lines of HTML.
To create a JAVA dummy document, follow all of the instructions for implementing the script and then upload everything to view it on line. Once you have your script working correctly by itself, it is easy to copy and paste the separate portions into the actual HTML document where you want it.
In our following post, we’ll share a few troubleshooting hints in case you run into any trouble.
Don’t Forget – Less than 23 Days Until Domain Registration Prices Go UP!
.com and .net domain prices are set to increase July 1, 2010
Lock in your domain name before prices go up . . .www.GoDaddy.com 
