Html Tips and Tricks

Thursday, June 03, 2004

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! google picture in a marquee for this html tip so whatever

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! google picture in a marquee for this html tip so whatever

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! google picture in a marquee for this html tip so whatever

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! google picture in a marquee for this html tip so whatever

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! google picture in a marquee for this html tip so whatever

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! google picture in a marquee for this html tip so whatever

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! google picture in a marquee for this html tip so whatever

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!


NEED EXTRA HELP? HAVE A SUGGESTION? HAVE SOMETHING TO ADD? PLEASE POST COMMENTS WHILE LOOKING AT ALL THESE USEFUL HTML TIPS AND TRICKS. THANK YOU!

11 Comments:

  • I just found your web site and it looks very educational...Question: Can I put a marquee on my site with all the pictures of my products?

    Thanks,
    donaholvick@hotmail.com

    By Blogger karoline, at July 26, 2008  

  • I have a question ..

    How can i place a Background Image in my marguee text code?

    I have an Image of a Parchment Paper scroll and would like the Marquee text to scroll upwards on the Image.

    I know how to size and what not to the marquee .. But not sure how to add a Background Image to it ... Can some one please help a fella gal out ?


    Than you
    september21f@yahoo.com

    By Blogger september, at August 27, 2008  

  • WHY NOT WORKING IN MY BLOG?
    I PASTE THE CODE IN THE HTML BOX AND IT DIDN'T SCROLL AUTOMATICALLY...

    By Anonymous THAi, at November 03, 2008  

  • and if i want to put that stuff in a comment???

    By Anonymous Anonymous, at November 26, 2008  

  • I just found your website and love it. I am creating my own webpage and this hase been extremely helpful. One question - how can I make the entire Marguee taller? (i.e. change the font size of the words?)
    Thanks,
    Cathy
    wrighttaxsolutions@gmail.com

    By Blogger Cathy, at August 17, 2009  

  • Here's some code Cathy:

    <marquee><font size="5">Bigger Text in Marquee</font></marquee>

    There's an html tip on formatting text if you want more information.

    By Blogger nilsmo, at August 17, 2009  

  • Oes Tsetnoc one of the ways in which we can learn seo besides Mengembalikan Jati Diri Bangsa. By participating in the Oes Tsetnoc or Mengembalikan Jati Diri Bangsa we can improve our seo skills. To find more information about Oest Tsetnoc please visit my Oes Tsetnoc pages. And to find more information about Mengembalikan Jati Diri Bangsa please visit my Mengembalikan Jati Diri Bangsa pages. Thank you So much.
    Oes Tsetnoc | Semangat Mengembalikan Jati Diri Bangsa

    By Blogger Adi, at November 24, 2009  

  • How can I make a marquee loop twice but on the second one stop and freeze so all text is visable?

    By Anonymous Anonymous, at December 09, 2009  

  • Hi... I need help for scrooling the text. Is there any alternative solution for scrolling the text other than marquee. thanks in advance.

    By Anonymous Anonymous, at February 18, 2010  

  • I have found all of your tips helpful. What is the code for specifically placing the marquee on a page?

    By Anonymous Anonymous, at August 04, 2010  

  • how do i make it roll when the last pic comes the the first pic after like a continuous loop with out the blank bit if you get my meaning ???

    By Blogger Darren Eden, at February 19, 2014  

Post a Comment

<< Home


Hit Counter