1. Computing
Send to a Friend via Email

Continuous Image Marquee

1. Introduction and Example

A regular marquee moves a single object through the display area and has to wait until the end has disappeared before being able to start scrolling it through again. This marquee replaces the single object with a series of images and as each image disappears out of the scroll area it is removed from that end of the array of images and readded to the other end ready to come through again. As long as you have enough images to fill the width of the marquee the images will form a continuous loop.

This script does have a few limitations though so we'll cover those first so that you know exactly what you are getting.

  • To start with all the images will be displayed at the same size (both width and height). If the images are not physically the same size then they will all be resized to make them appear the same size. This would use the inefficient method of adjusting the size displayed in the browser window rather than physically resizing the image source.
  • The height of the images must match the height set for the marquee. If the height of the marquee differs from that of the images then the images will again be resized to fit. If the images are scaled then you will want to ensure that they are scaled evenly for both width and height so as to not have the images appear distorted. A better solution is to make sure all the images are the right size to start with.
  • The image width multiplied by the number of images must be greater than the marquee width. The easiest fix for this if there are insufficient images is to just repeat the entries in the image array a second time.
  • The only interaction that the first version of this script provides is that when you move the mouse over the marquee the images will stop moving and when you move the mouse off the marquee it will start moving again. Once you have that version working then I describe a modification that can be made to convert all the images into links.
  • You can have multiple marquees on the same page with this script and can specify different images (and different image sizes) for each. The marquees all run at the same speed though so moving the mouse over any of them will cause all of them to stop moving.
  • You must supply your own images. The ones I have included in the marquees on this page are there to illustrate the functionality of the script only and do not form a part of the script.

If those limitations don't put you off from deciding to use this script then the next step is to get the script.

Related Video
Add a Background Image to a Webpage
Adobe Photoshop Marquee Tool

©2014 About.com. All rights reserved.