Weird Tips for Scrolling Banners (Marquees)

Before reading, click here to see how to create a basic marquee.

Now, after you've read that, you are probably dying to get some tricks implanted into these marquees.

See this code? It puts an image resized to a height of 33, a width of 82, and the alternative text: "google picture in a marquee for this html tip so whatever".

<MARQUEE>

Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82

ALT="google picture in a marquee for this html tip so whatever">

</MARQUEE>

If crammed into ONE line, the code creates this:



Hi There!



You can also use all types of interesting html inside the <marquee> tags.

So, now we have easily put an image into the marquee.

It takes long, however, for the marquee to scroll across the entire page.

How about we make scroll in just a little part of the page?

An html tip comes to the rescue!:

If we use width=200 we can do this:

<MARQUEE width=200>

Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82

ALT="google picture in a marquee for this html tip so whatever">

</MARQUEE>

If pasted onto ONE line, look at what happens:



Hi There!



You can obviously change the number after the width= if you want.

You can even use length= when coding html, too, but I unfortunately won't go over that...

So, now we can make the marquee scroll shorter; with less width.

How about we give you another little tip which will get the marquee going in another direction!

Let's add direction=right to make the marquee scroll the other way:

<MARQUEE width=200 direction=right>

Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82

ALT="google picture in a marquee for this html tip so whatever">

</MARQUEE>

Let's see what happens when we put the code on only one line:



Hi There!



Ooooooh...

You can also use direction=left but I don't see a reason.

So, we've used some weird html tips so far.

How about we make the marquee slide, go back and forth...

Why not?

Let's make it go back and forth by adding behavior=alternate:

(Code:)

<MARQUEE width=200 direction=right behavior=alternate>

Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82

ALT="google picture in a marquee for this html tip so whatever">

</MARQUEE>

(Result when inserted onto one line:)



Hi There!



You can also use behavior=slide.

A normal marquee uses behavior=scroll.

Yeah, yeah...

Let's make a the marquee go slower.

Let's use scrolldelay!

Look at some code using scrolldelay:

<MARQUEE width=200 direction=right behavior=alternate scrolldelay=500>

Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82

ALT="google picture in a marquee for this html tip so whatever">

</MARQUEE>

If this tip were inserted onto one little line, look at what happens

(Look below for a LONG time and you'll see what happens):



Hi There!



Remember you can always change the number in front of scrolldelay=.

So, now we got slower marquees.

What about faster marquees?

Instead of scrolldelay we use scrollamount for this:

Look at a code with scrollamount:

<MARQUEE width=200 direction=right behavior=alternate scrollamount=30>

Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82

ALT="google picture in a marquee for this html tip so whatever">

</MARQUEE>

If compacted onto one line after the code is pasted in, look at what happens:



Hi There!



Remember to change the scrollamount= number, and note that you can try to use scrollamount at the same time as scrolldelay!

Finally, let's make the marquee thing loop just once using loop=:

Let's look at the code:

<MARQUEE width=200 direction=right behavior=alternate scrollamount=30 loop=2>

Hi There! <IMG SRC="http://www.google.com/images/logo.gif" HEIGHT=33 WIDTH=82

ALT="google picture in a marquee for this html tip so whatever">

</MARQUEE>

Let's look at the output of this html put in one line:



Hi There!



It loops only twice! Oooh... And also remember that this does not work on all browsers.

Oh wait, by the time you're down here it has already looped twice...

Lastly, remember to change the amount of loops to what you want.

So, those are the tips for today!