Ask Michel Komarov

<MARQUEE>

The <marquee>...</marquee> HTML-element creates a scrolling text marquee. This is all we need.
We’ll use 4 main parameters of the element:
* BEHAVIOR     - sets how the text scrolls in the marquee,
* DIRECTION    - sets the direction in which the text should scroll,
* SCROLLDELAY  - sets the speed of the marquee scroll,
* SCROLLAMOUNT - sets the number of pixels the text scrolls between each subsequent drawing of the marquee.

<marquee BEHAVIOR="scroll" ... > specifies one of the following values:
scroll	Default. Marquee scrolls in the direction specified by the DIRECTION parameter. The text scrolls off the end and starts over.
alternate	Marquee scroll direction reverses when its content reaches the edge of the container.
slide	Marquee scrolls in the direction specified by the DIRECTION parameter. The text scrolls to the end and stops.

<marquee DIRECTION="up" ... > specifies one of the following values:
left	Default. Marquee scrolls left.
right	Marquee scrolls right.
down	Marquee scrolls down.
up	Marquee scrolls up.

<marquee SCROLLDELAY="60" ... > specifies the delay, in milliseconds.
	The parameter has a default value of 85.

<marquee SCROLLAMOUNT="1" ... > specifies the number of pixels.
	The parameter has a default value of 6.

Scroll your text Ads

You may have a continued text or several paragraphs with your ads scrolling up through a spot at your page.
Lets suppose you have a <DIV> with specified width and height:

<DIV width="120" height="100">
<marquee BEHAVIOR="scroll" DIRECTION="up"
    SCROLLDELAY="60" SCROLLAMOUNT="1"
    style="width:120px;height:100px;
        border:1px solid silver;padding:4px;">

    <b>Ad 1</b>
    <a href="url_1">link 1</a>
    Advertising text 1.

    <b>Ad 2</b>
    <a href="url_2">link 2</a>
    Advertising text 2.

    <b>Ad 3</b>
    <a href="url_3">link 3</a>
    Advertising text 3.
</marquee>
</DIV>

Ad 1
link 1
Advertising text 1.

Ad 2
link 2
Advertising text 2.

Ad 3
link 3
Advertising text 3.

Rotate your banner images

Do you have banner images with equal sizes? Great!
You can rotate them without any script.

Set the SCROLLAMOUNT parameter of your marquee to your images height and the SCROLLDELAY parameter to 1000 for a second (1000 milisecinds).
Look at this:

<DIV width="60" height="62">
<marquee BEHAVIOR="scroll" DIRECTION="up"
    SCROLLDELAY="1000" SCROLLAMOUNT="62"
    style="width:60px;height:62px;">
        <img width="60" height="62" src="url_1" />
        <img width="60" height="62" src="url_2" />
        <img width="60" height="62" src="url_3" />
        ...
</marquee>
</DIV>

Stop scrolling

When you scroll ads with links it would be nice to stop scrolling to let the user clicks the link.
The marquee allows you to do this too.

I promised there wouldn’t be a script… I were cunning
You’ll need a small script.

Use the onmouseover attribute to trigger the stop() method and the onmouseout attribute to trigger the start() method to scroll the text again after the user takes his mouse away.

This sample is for horizontal scroll.

<marquee BEHAVIOR="alternate" DIRECTION="left"
    SCROLLDELAY="100" SCROLLAMOUNT="5"
    onmouseover="this.stop()" onmouseout="this.start()">
    <b>Touch this text with mouse to stop it</b>
</marquee>

Touch this text with mouse to stop it

 

 

This entry was posted on Wednesday, May 31st, 2006 at 12:11 and is filed under Plug-in Scripts, Sales Pages, HTML Tips. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.