How did I make my Carousel Work?

Please be patient - images take a moment to load.

Get the Code

GeoCities once offered the full code and basic instructions on the "Cool Effects" page, which has since gone missing. Luckily, I found the source of this cool applet, and several others as well! To download the .class file and get the code needed for the Image Carousel, you'll need to register with Intel - the applet is free though, so enjoy!

The code for the Carousel on this page looks like this:

<APPLET CODEBASE="/classes/intel" CODE="carousel.class" NAME="Image Carousel" WIDTH="475" HEIGHT="160">
<PARAM NAME="numimages" VALUE="5">
<PARAM NAME="backcolor" VALUE="6666CC">
<PARAM NAME="showhand" VALUE="no">
<PARAM NAME="speed" VALUE="high">
<PARAM NAME="tilt" VALUE="low">
<PARAM NAME="washout" VALUE="medium">
<PARAM NAME="image1" value="/Heartland/Pointe/4217/pretty_cat.jpg,http://www.oocities.org/Heartland/Pointe/4217/cats.html,page">
<PARAM NAME="image2" value="/Heartland/Pointe/4217/paul_cute.jpg,http://www.oocities.org/,page">
<PARAM NAME="image3" value="/Heartland/Pointe/4217/jamie_bear.jpg,http://www.oocities.org/,page">
<PARAM NAME="image4" value="/Heartland/Pointe/4217/j_cave.jpg,http://www.oocities.org/,page">
<PARAM NAME="image5" value="/Heartland/Pointe/4217/easy_riders.jpg,http://www.oocities.org/,page">
</APPLET>

All of the items in red can be customized. You can also make each image "clickable" by adding the URL you want it to take you to after the "http://" - just leave the ",page" there. To see what I mean, look at the code for my first image, "pretty_cat.jpg". Click on her, and you'll go to my cats page. Anyway, having made it this far on my own, I found that I could not make my carousel work!

Then I discovered:
The Secret

After carefully examining a carousel which was working, I realized all of the images were the same size. There is a co-relation between the size of your images and the "height" of the applet. When I first tried to make the applet work, my images were all different sizes, and they were all rather "tall". Turns out, they were too tall to fit inside the carousel. Since I wanted my carousel to be 160 pixels high (as in the above code), I resized all my images to slightly less than 160 - the images below are the actual size, 135 by 110 pixels...

image1
pretty_cat.jpg		 image2
paul_cute.jpg		 image3
jamie_bear.jpg
image4
j_cave.jpg		 image5
easy_riders.jpg

If you'd like to use bigger images, just experiment with the "height" tag, making sure that it is always more than your "tallest" image and no less than 150. GeoCities also suggests sticking to the smaller end of the scale. You can also try varying the "width" to see what effect pleases you most, although you shouldn't go any lower than 250. Give it a try while I cross my fingers for you!

If you have any comments, suggestions, or questions, please feel free to E-mail me.

Another point: the code for this applet is not stored in the same file as your images, so sometimes it takes a little longer to start running because it's looking for the code in GeoCities server.

 

Return to my Main Help Page


New counter unexpectedly sprung on me Nov 12, 2000.
I am unhappy with Yahoo!