Author's Note: The "FlipH" filter call used in this tutorial is in the original Internet Explorer 4 call format. It will also work under the new filter call format instituted by Internet Explorer 5.5. Be sure to check out the Microsoft documentation available on their web site.

The <MARQUEE> HTML element can be very useful for moving images over the screen, as can be seen in the sunset graphic above. The pelican flies majestically across the sky, crossing just perfectly in front of the sun. How is this accomplished? It is rather simple, as you will see. And, it is all done without scripting! Four simple lines of HTML created the effect above. Read on to see how it is done.




Here are the two images we will be working with:



First, let's start with the sunset image. Here is the HTML:


Notice our image is positioned absolutely. On our imaginary page, for this example we'll position the upper left-hand corner of the image at left:0px (0 pixels from the left hand side of the screen) and top:0px (0 pixels from the top of the screen). It is important to precisely control the positioning of the two images so that the pelican flies exactly where we want it to. We have set the z-index to 1, which places the sunset image one layer above the screen background (the screen background is always z-index:0). I have assigned the image this arbitrary layer value as a starting point for our composition. We'll place the pelican at z-index:2, one layer above this image. Notice also that the sunset image border has been removed for the example (border=0). We'll talk a little more about that later. Finally, we set up the width and the height of the image in pixels.

The pelican is a simple, animated .GIF image found and saved off the web. Start a folder, and go surfing for images to use like this one! Any small image will work, animated or not.

Now let's see what the <MARQUEE> tag looks like, and how it controls the pelican, which is embedded within:


The <MARQUEE> element has a starting (<MARQUEE>) and ending (</MARQUEE>) tag, and between the two we place our pelican image, as shown. Now let's go through the items in the <MARQUEE> tag one by one, and see what they do:

direction=right
This sets the direction of travel for the marquee image. The direction may also be set to left, up, or down.

loop=-1
This value sets the number of times the image will be scrolled across the screen in the direction stated above. We have set it to -1, which will scroll the image indefinitely. If we wanted the pelican to fly just a single time across its background, we would set loop=1.

scrollAmount=4
This is the number of pixel space which separates each redrawing of the pelican. Larger numbers cause faster movement, but may result in a jerky image. You will want to experiment with this value for your particular image, but this is a good starting point.

scrollDelay=40
This is the number of milliseconds (1 millisecond = 1/1000th of a second) between each small image movement. Larger numbers result in slower movement. You will want to experiment with this value for your particular image, but this is a good starting point.

width=321
Here we set the width of the scroll, in pixels. Our sunset image is 321 pixels wide, and we want to move (scroll) the pelican the entire width of the image.

style="z-index:2; position: absolute; left:0px; top:60px"
This is where we set the positioning of the marquee (with included pelican image). It is not set in the pelican <IMG> tag. Notice we start at the extreme left (left:0px), exactly where the left edge of the sunset image is positioned. However the vertical position (top:60px), places the pelican 60 pixels down from the top, relative to the sunset image. This is exactly the right amount to make it fly across the sun. z-index:2 sets the marquee's layer index (also the pelican's, since it's contained within the <MARQUEE> element).


Within the <IMG> tag for the pelican, we need only set the image's width and height, in pixels.

Here is the code put together in an HTML document:




To add the border to the sunset image and still have the pelican transit correctly, we must account for the width of the border. Here is the new sunset <IMG> tag, with border specified:


We have specified a border width of 8 pixels. Borders drawn this way around images are always black in color. Now, let's see what we need to change in the <MARQUEE> element:


Notice we have shifted the scroll starting point (or ending point if this was a direction=left scroll) over by 8 pixels. No changes are necessary to the pelican <IMG> tag. It's that simple.


To move the pelican left across the sunset image, we must make only two small changes. First, we must flip the pelican image horizontally using a Visual Filter. This creates a mirror image so that he flys forward! Adding the text filter:fliph; to the style: operator of our pelican image flips the animated .GIF horizontally, saving us from recreating it! Here is the change:




Now, we need to make but one simple change to the <MARQUEE> tag:


Notice we have changed the direction of the scroll to left. Everything else remains the same. The result is this:





Here are the two images we will be working with:



First, let's start with the clouds image. Here is the HTML:


Notice again our image is positioned absolutely. On our imaginary page, it is positioned in the upper left-hand corner as before. The z-index value has been again set to 1. We will set a border of 8 pixels around the clouds. Finally, we set up the width and the height of the image in pixels. Do not count the border width in your width and height specification.

The balloon is a simple image found on the web.

Now let's see what the <MARQUEE> tag looks like, and how it controls the balloon which is embedded within:


This time we have set our direction=up, the movement we desire for the balloon. height=200 defines the length of vertical travel (in pixels), the height of the clouds image. Since we are scrolling in an upward direction, setting width= is not done. top:8px is set to account for the width of the border, then finally we set the left:85px to roughly center the balloon on the clouds image.

For the balloon <IMG> tag, we have set the width, and height to the size of the balloon image.

Put it all together, and this is the result:




All the same rules previously discussed apply when moving an image down. The <MARQUEE> tag looks like this with one change applied:


This time we have set our direction=down. In the <IMG> tag, we need not flip the image with a filter, as it doesn't matter for the balloon.



Here are some random ideas and techniques you can also try.



• Define multiple <MARQUEE> elements in the same document or post to create interesting effects. Be sure to layer the images in the proper order using the z-index: parameter. Have images going in all directions!

• Experiment with filters on or over the <MARQUEE> element to create fade effects, perhaps having a flying bird fade off into the distance. Careful timing is the rule here.

• Create your main background image in pieces, layering them, then use <MARQUEE> to move an image across one and disappear beneath another.




This is the quick course on the <MARQUEE> element. There are many possibilities for experimentation here. Try some things; I know you will have fun.