http://javascript.about.com/library/blcmarquee1.htm


Continuous Image Marquee
1. Introduction and Example
Basic Help

Using Pre-written Scripts
More of this Feature

Obtain the Script Add to Your Page Adding Links Vertical Scroller

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.


















Continuous Image Marquee
2. Obtain the Script
More of this Feature

Example Add to Your Page Adding Links Vertical Scroller

The first thing you need to do to be able to use my continuous images marquee script is to copy the following JavaScript and save it as marquee.js.

This code contains two image arrays (for the two marquees on my example page) as well as adding two new mq objects containing the information on what to display in those two marquees. You may delete one of those and change the other to display one continuous marquee on your page or repeat those statements to add even more marquees. The mqRotate function must be called passing mqr after the marquees are defined as that will handle the rotations.
var mqAry1=['graphics/img0.gif','graphics/img1.gif','graphics/img2.gif','graphics/img3.gif','graphics/img4.gif','graphics/img5.gif','graphics/img6.gif','graphics/img7.gif','graphics/img8.gif','graphics/img9.gif','graphics/img10.gif','graphics/img11.gif','graphics/img12.gif','graphics/img13.gif','graphics/img14.gif']; var mqAry2=['graphics/img5.gif','graphics/img6.gif','graphics/img7.gif','graphics/img8.gif','graphics/img9.gif','graphics/img10.gif','graphics/img11.gif','graphics/img12.gif','graphics/img13.gif','graphics/img14.gif','graphics/img0.gif','graphics/img1.gif','graphics/img2.gif','graphics/img3.gif','graphics/img4.gif']; function start() { new mq('m1',mqAry1,60); new mq('m2',mqAry2,60);// repeat for as many fuields as required mqRotate(mqr); // must come last } window.onload = start; // Continuous Image Marquee // copyright 24th July 2008 by Stephen Chapman // http://javascript.about.com // permission to use this Javascript on your web page is granted // provided that all of the code below in this script (including these // comments) is used without any alteration var mqr = []; function mq(id,ary,wid){this.mqo=document.getElementById(id); var heit = this.mqo.style.height; this.mqo.onmouseout=function() {mqRotate(mqr);}; this.mqo.onmouseover=function() {clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw = ary.length; for (var i=0;i<maxw;i++){this.mqo.ary[i]=document.createElement('img'); this.mqo.ary[i].src=ary[i]; this.mqo.ary[i].style.position = 'absolute'; this.mqo.ary[i].style.left = (wid*i)+'px'; this.mqo.ary[i].style.width = wid+'px'; this.mqo.ary[i].style.height = heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);} function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j > -1; j--) {maxa = mqr[j].ary.length; for (var i=0;i<maxa;i++){var x = mqr[j].ary[i].style; x.left=(parseInt(x.left,10)-1)+'px';} var y = mqr[j].ary[0].style; if (parseInt(y.left,10)+parseInt(y.width,10)<0) {var z = mqr[j].ary.shift(); z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + 'px'; mqr[j].ary.push(z);}} mqr[0].TO=setTimeout('mqRotate(mqr)',10);}

You next attach the script into your web page that you wish to display your marquees on by adding the following code into the head section of your page.
<script type="text/javascript" src="marquee.js">
</script>

I'll go into more detail on how to set up the new mq() objects as we look at how to add marquees to your page.

Continuous Image Marquee
3. Add to Your Page
More of this Feature

Example Obtain the Script Adding Links Vertical Scroller

Along with the JavaScript there are a couple of other things that we need in order to add marquees to our web page. One of these is a style sheet command to define how each of our marquees will look. Here's the code I used for the ones on my example page:
.marquee {position:relative;
     overflow:hidden;
     width:500px;
     height:60px;
     border:solid black 1px;
     }

You can change any of these properties for your marquee except that it must be position:relative. You can either place it in your external style sheet if you have one or enclose it between <style type="text/css"> </style> tags in the head of your page.

The next step is to define a div in your web page where you are going to place the marquee of images. The first of my example marquees used this code:
<div id="m1" class="marquee"></div>

The class associates this with the stylesheet code while the id is what we will use in the new mq() call to attach the marquee of images.

The final thing to do to put all of this together is make sure that your code to add the mq object in your JavaScript after the page loads contains the right values. Here's what one of my example statements looks like:
new mq('m1',mqAry1,60);

The 'm1' is the id of our div tag so that we can identify the div that is to display the marquee.

mqAry1 is a reference to an array of images that will be displayed in the marquee. Remember that these need to be all the same size and if they are not then the script will resize them.

The final value 60 is the width of our images (the images will scroll from right to left and so the height is the same as we defined in the style sheet).

To add additional marquees we just set up additional image arrays, additional divs in our HTML, possibly set up additional classes so as to style the marquees differently, and add as many new mq() statements as we have marquees. We just need to make sure that the mqRotate() call follows them to operate the marquees for us.

The only other thing that you may want to consider is to modify the script slightly so that each image becomes a link.



Continuous Image Marquee With Links
4. Adding Links
More of this Feature

Introduction Obtain the Script Add to Your Page Vertical Scroller

Unlike the examples on the introduction page, the images in the marquee on this page are links. I have provided no clue as to which page each image links to and so if you want to find out what scripts I decided to link to you'll have to try clicking on the different images to find out. Of course for your purposes you may want to have a direct association between each image and where it links to rather than the guessing game situation I have with the example. You may also want multiple images to link to the same place which is also easily done.

There are only two changes you need to make in order to get the images to act as links. The first change is to change your image array from an array of images to an array of arrays where each of the internal arrays consists of an image in position 0 and the address of the link in position 1.
var mqAry1=[
['graphics/img0.gif','blcmarquee1.htm'],
['graphics/img1.gif','blclockm1.htm'],...
['graphics/img14.gif', 'bltypewriter.htm']];

The second thing to do is to substitute the following for the main part of the script.
// Continuous Image Marquee with Links // copyright 21st September 2008 by Stephen Chapman // http://javascript.about.com // permission to use this Javascript on your web page is granted // provided that all of the code below in this script (including these // comments) is used without any alteration var mqr = []; function mq(id,ary,wid){this.mqo=document.getElementById(id); var heit = this.mqo.style.height; this.mqo.onmouseout=function() {mqRotate(mqr);}; this.mqo.onmouseover=function() {clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw = ary.length; for (var i=0;i<maxw;i++){var img=document.createElement('img'); img.src=ary[i][0]; var lnk=document.createElement('a'); lnk.href=ary[i][1]; lnk.appendChild(img); this.mqo.ary[i]=document.createElement('div'); this.mqo.ary[i].appendChild(lnk); this.mqo.ary[i].style.position = 'absolute'; this.mqo.ary[i].style.left = (wid*i)+'px'; this.mqo.ary[i].style.width = wid+'px'; this.mqo.ary[i].style.height = heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);} function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j > -1; j--) {maxa = mqr[j].ary.length; for (var i=0;i<maxa;i++){var x = mqr[j].ary[i].style; x.left=(parseInt(x.left,10)-1)+'px';} var y = mqr[j].ary[0].style; if (parseInt(y.left,10)+parseInt(y.width,10)<0) {var z = mqr[j].ary.shift(); z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + 'px'; mqr[j].ary.push(z);}} mqr[0].TO=setTimeout('mqRotate(mqr)',10);}

The rest of the what you need to do remains the same as described for the version of the marquee without the links.