BigNoseBird.Com- Small Logo
The 508 compliant Guide to 
       Big Nose Bird
Site Search Engine


Dynamic Image Rotation

Breathe life into your pages with SSI & CGI...


- Bruce
What are our objectives?
If you have already read my pages on simple CGI programming and my Server Side Include (SSI) page, this is where you will learn something about when to use CGI & or SSI to solve a problem. More importantly, you will learn how and when to combine them to your advantage.

As always, please feel free to help yourself to all the source code you can carry!

One of the more popular requests I have been getting of late is for a simple and educational version of the Banner URL Rotation Program. To keep things simple, let's just call it the BURP. The fact is, depending on exactly what we want to accomplish, there are really two different ways we have to set up our BURP.

Baby BURP
Our first scenario is one where we have several image files, but either no links or a single link that never changes. This situation allows us the most simple solution, a very small script that is called using the <IMG> tag.

For most personal pages this method is desirable in that you can rotate various pictures without having to update your source code. For a business page, this is a good way to use several different images to try and draw people to a particular page or product.

Daddy BURP
Another popular situation we might find ourselves in, is one where not only do we want to rotate our image, but we want to rotate our link information as well. This is found more often on business sites, whether as a way to feature various products, or to sell advertising space.

The Daddy BURP therefore requires a bit more programming effort, and we must use the Server Side Include (SSI) method to implement the rotation.

Our objectives for this tutorial are to create two very simple, yet useful programs, and to gain a deeper understanding of some powerful devices available to you as a webmaster.
Of course, if you are on the computer less changing images and links you will save electricity. You will also rest easier which will lower your respiration. All of these things result in less Carbon Dioxide, a major greenhouse gas. Think about it... Not too hard, okay?

Why do we need two BURPs?
Maybe you caught the subtle hint contained in our two different objectives. The answer to our question is what kind of information we are returning to the browser. With Baby BURP we are returning only the contents of a graphic file, but with Daddy BURP we need to also supply link information which is text.

In our earlier CGI & SSI tutorials, we would start each output with the program code:

       print "Content-type: text/html\n\n";
  
This would instruct our browser to accept the information returning from our script to be treated as HTML code. As you might have guessed by now, this is not our only option. In dealing with images, we have two other popular choices:
       print "Content-type: image/gif\n\n";
       print "Content-type: image/jpeg\n\n";
  
Hmmmm. I bet you can figure out which one is for a JPG and which one is for a GIF file. The reason we have to do this may seem a little strange at first, but it will make sense in a moment.

Why do we need to use Content-type?
When your browser receives a web page, it can read through it and figure out what is what because it already knows how to handle the more popular file types based on what is called the extension of the file. The extension of a file are the characters after the period in the file name. Here are some familiar examples with their meanings:

File Extension Description MIME Type
.jpg .jpegJPG graphics file image/jpeg
.gifGIF graphics file image/gif
.midMIDI music file audio/x-midi
.wavWAV sound file audio/x-wav
.html .htmHTML files text/html
Note: MIMEs are not those folks that seem to always be stuck in boxes, don't speak and walk into the wind. MIME actually stands for Multipurpose Internet Mail Extension. Systems people make heavy use of acronyms because we can't stand the words that we have created.
The reason we must use the Content-type at the beginning of our dynamic output is so the browser will know how to decode the information being sent to it. Look at the banner directly under here. Each time you load this page, the odds are you will get a different banner. There are four images in this rotation scheme.
  <IMG SRC="/cgi-bin/banner.cgi" WIDTH=400 HEIGHT=40 BORDER=0>
  
The line directly below the graphic is how the CGI program is run on this system. One important thing to notice now is that there is nothing in this URL (address) to tell our browser what to do with the information when it shows up. Then name banner is only meaningful to us humans, not to our browsers!

The other important point is that our CGI can only return one type of information. Just one of those limitations I warned you about. You will see when we get around to our Daddy BURP that we will be returning text to our browser, not an image. As with most things in life, you will find that the solution to that problem is also simple!

Great. Where's the program?
Look down. Just a little. That's it! Believe it or not, this is the entire Baby BURP program.
#!/usr/bin/perl
$|=1;
$mypic[0]="/usr/dom/bignose/www/dimages/tbanner0.gif";
$mypic[1]="/usr/dom/bignose/www/dimages/tbanner1.gif";
$mypic[2]="/usr/dom/bignose/www/dimages/tbanner2.gif";
$mypic[3]="/usr/dom/bignose/www/dimages/tbanner3.gif";
srand(time ^ $$);
$pick = rand(@mypic);
print "Content-type: image/gif\n\n";
open (BANNER,$mypic[$pick]);
print <BANNER> ;
close (BANNER);
 
To install this program on your system:
  • Cut and paste the code into a file.
  • Edit the file so that the first line has your path to the perl language. Usually /usr/bin/perl works, if not, try /usr/local/bin/perl. Remember, the first line of all perl scripts must be the #!/usr/bin/perl. Be sure there is nothing above it!
  • All your files must be of the same type. If you are using JPG, change the Content-type to jpeg. For the best results, use images that are the same size.
  • Edit the paths and filenames on the lines starting with $mypic. If you have less than four images, delete the highest numbered ones first. If you have more, than start adding with number 4. Always be certain that the first one is a zero.
  • Save the file as banner.cgi
  • Upload the file to your cgi directory and set the permissions to owner-read/write/execute, group-read/execute, and others-read/execute. The unix command is: chmod 755 banner.cgi
    If you are on a unix server, be sure to upload the file as ASCII Text.
Add the line below to your document. You may need to change the path to your cgi-bin as this does vary from system to system. If you have already installed any CGI programs on your system, you should be able to figure this out pretty fast. If not, contact your system administrator.
    <IMG SRC="/cgi-bin/banner.cgi" WIDTH=400 HEIGHT=40 BORDER=0>
 
How does this program work?
Again, another great mystery of the system's world has been exposed to you. The answer is, "Very simply!"

This line tells our server where to find the perl language.
     #!/usr/bin/perl
This tidbit tells the server to send the information out ASAP.
     $|=1;
The next four lines is what we call an array or list.
This is not the best way to fill one up from a technical position,
but it should result in the fewest typographical errors. Notice
that our first array element is the number zero, not one.
     $mypic[0]="/usr/dom/bignose/www/dimages/tbanner0.gif";
     $mypic[1]="/usr/dom/bignose/www/dimages/tbanner1.gif";
     $mypic[2]="/usr/dom/bignose/www/dimages/tbanner2.gif";
     $mypic[3]="/usr/dom/bignose/www/dimages/tbanner3.gif";
This is how we pick a random number between 0 and the highest
item in our array. The srand performs what is called a
seeding of the random number generator. If this is not
done, we would always get the same result when rand is
called. Since time always marches on, it makes a good seed.
     srand(time ^ $$);
     $pick = rand(@mypic);
Here is how we tell the browser what to expect.
     print "Content-type: image/gif\n\n";
We then open our randomly selected file. Notice that we have
replaced the numerals such as (0,1,2,...) with the variable
$pick that is our random number.
     open (BANNER,$mypic[$pick]);
With the least amount of code possible we send the file out
to the browser.
     print <BANNER> ;
Being considerate programmers, we close the file to make certain
that valuable system resources are not tied up.
     close (BANNER);
 
Where's Daddy BURP?
Just place your mouse pointer Right Here and click!




Find or Give Help on the BBS
 
Home Top E-Mail
If it looks great, it's by Christine
Some Fine Print
© 1997-2003 BigNoseBird.Com®, Inc. All rights reserved. All other trademarks are the sole property of their respective owners. The products that we recommend are only ones that we use. We have no relationship with any of the authors or their companies. We cannot assume responsibility for their ultimate performance or lack of same. We also cannot assume responsibility for either any programs provided here, or for any advice that is given since we have no control over what happens after our code or words leave this site. Always use prudent judgment in implementing any program- and always make a backup first! For further information, please read our Privacy Statement. We can be contacted at webmaster@bignosebird.com.


<reallybig.com>
Web Builder Network Portal
Advertise
on the
Reallybig.com
Network
BigNoseBird Newsletter
Subscribe
Un-Subscribe


Sign up today to receive our low volume newsletter. Tips, tricks, news, and whatever else crosses our minds.
Back Issues
Privacy Statement