Carousel Tutorial

Click on each photo to visit their page.



***Please Note***
The codes for the Carousel are for Geocities Web Pages only.
The Carousel will not work on other servers.
Why not apply for your own 11MB Free Web Site now!
Visit Geocities
If you would like a Carousel on your page just follow these steps: 
***VERY IMPORTANT (Please read "Preparing your photos for the Carousel" at the bottom of this page before proceeding)
1)  It's easy to put the Image Carousel on your web pages -- even if you don't know
        HTML. All you have to do is "copy and paste" the following code between
        the "<body>" and "</body>" tags of your HTML file in your file manager.
<CENTER><APPLET CODEBASE="/classes/intel" CODE="carousel.class" NAME="Image Carousel" WIDTH="475" HEIGHT="260"><PARAM NAME="numimages" VALUE="6"><PARAM NAME="backcolor" VALUE="3366FF"><PARAM NAME="showhand" VALUE="no"><PARAM NAME="speed" VALUE="high"><PARAM NAME="tilt" VALUE="low"><PARAM NAME="washout" VALUE="medium"><PARAM NAME="image1" VALUE="/Yosemite/Forest/1500/Carousel/cassie1a.jpg,,page"><PARAM NAME="image2" VALUE="/Yosemite/Forest/1500/Carousel/carly1a.jpg,,page"><PARAM NAME="image3" VALUE="/Yosemite/Forest/1500/Carousel/bridgett1a.jpg,,page"><PARAM NAME="image4" VALUE="/Yosemite/Forest/1500/Carousel/Rachel1a.jpg,,page"><PARAM NAME="image5" VALUE="/Yosemite/Forest/1500/Carousel/sara1a.jpg,,page"><PARAM NAME="image6" VALUE="/Yosemite/Forest/1500/Carousel/richie2a.jpg,,page"></APPLET></CENTER>
2)  Edit your Code by changing ONLY the parts in red.
3)  "numimages" VALUE="6" is the number of images to be used in the Carousel.
4)  "backcolor" VALUE="3366FF" is the color you wish your background of the Carousel to be.  I chose to match this to the background of the page.  Example Colors:  Red     FF0000  Green   00FF00  Blue    0000FF
5)  "showhand" VALUE="no"  Determines whether or not the small hand-cursor image (shipped with the carousel applet) is drawn to the display or not. The value can be yes or no.
6)  "speed" VALUE="high"  How fast the images rotate around the Image Carousel. The value can be set to low, medium and high. A value of low will have the slowest possible carousel rotation, while a value of high will have the fastest possible carousel rotation.
7)  "tilt" VALUE="low"  The "tilt" of the wheel. This value determines the apparent tilt (or view angle) of the wheel. The value can be set to none, low, medium and high. A value of none will cause the carousel to have no tilt whatsoever (causing you to look at it edge-on), while a value of high will have an almost circular ellipse.
8)  "washout" VALUE="medium"  This determines how much an image is allowed to "wash out" as it passes along the back portion of the wheel. The value can be set to none, low, medium or high. A value of none will have no washout properties whatsoever, while a value of high will cause images to washout almost completely.
9)  "image1"  You will need this line for each of your images, changing the number for each line.  The number of lines must match the number of the value of "numimages"
10)  Yosemite/Forest/1500/Carousel/cassie1a.jpg This would be the exact location and title of your image.
11) Use this part of the code to link each image to another page using the URL of that page.  You cannot omit this part of the code or the carousel will not work.  You can link to your own index.html page or to the page the carousel is on.
12)  Repeat # 10 & 11 for each image used.
Preparing your photos for the Carousel
All photos MUST be the same size.  I cropped and sized my photos to 100 x 100.  To make loading more efficient, none of my photos are over 2.5K.

[Tutorial Index]  [Photo Carousel]  [Lake Applet]  [Snow Applet]  [Tables]
[Adding Graphics]  [Adding Sound]  [Adding Backgrounds]  [Color Chart]