NOVIDADES100 Tem de Tudo

Criar Marquees em Páginas da Internet

Marques são bem úteis e simples de serem construídas além de ser uma das poucas ferramentas dinâmicas html.
Primeiro vou criar aqui uma marquee básica, depois adicionarei alguns atributos.
Veja um exemplo de marquee ocupando toda a largura da página:

MARQUEE SIMPLES

Modo de construir:

<marquee>
MARQUEE SIMPLES
</marquee>

Este exemplo acima de marquee não contém nenhum atributo, como você pode perceber.

ALTURA E LARGURA

Agora adicionando o atributo width (largura) e height (altura):

ALTURA E LARGURA DE MARQUEE

Modo de construir:

<marquee width="30%" height="30">
ALTURA E LARGURA DE MARQUEE
</marquee>

BGCOLOR

Agora adicionando o atributo bgcolor:

MARQUEE - BGCOLOR

Modo de construir:

< style="marquee width="620" height="20" bgcolor="#ffee00">
MARQUEE - BGCOLOR
</marquee>

SCROLLAMOUNT

Adicionando o atributo scrollamount (velocidade da marquee):

MARQUEE - SCROLLAMOUNT

Edite assim:

<marquee width="620" scrollamount="20" bgcolor="33ccff">
MARQUEE - SCROLLAMOUNT
</marquee>

MARQUEE - SCROLLAMOUNT

Editar:

<marquee width="620" scrollamount="20" bgcolor="33ccff">
MARQUEE - SCROLLAMOUNT
</marquee>

DIRECTION

Agora adicionando o atributo direction (direção)

MARQUEE - DIRECTION

Como editar:

<marquee direction="left" bgcolor="#33ccff">
MARQUEE - DIRECTION
</marquee>

MARQUEE - DIRECTION

Como editar:

<marquee direction="right" bgcolor="#77dd77"> MARQUEE -
DIRECTION
</marquee>

MARQUEE - DIRECTION

Como editar:

<marquee width="200" height="100" direction="up" bgcolor="#ffee00" scrollamount="6">
MARQUEE - DIRECTION
</marquee>

MARQUEE - DIRECTION

Como editar:

<marquee direction="down" bgcolor="#ffffaa" scrollamount="4">
MARQUEE - DIRECTION
</marquee>

BEHAVIOR

Vamos agora utilizar o atributo Behavior.
Scroll: este é o valor padrão de marquee.

MARQUEE - BEHAVIOR

Faz-se assim:

<marquee behavior="scroll" width="620" bgcolor="#ffcc00">
MARQUEE - BEHAVIOR
</marquee>
Slide:

MARQUEE - BEHAVIOR

Para editar:

<marquee behavior="slide" width="620" bgcolor="#ffcc00">
MARQUEE - BEHAVIOR
</marquee>
alternate:

MARQUEE - BEHAVIOR

Para editar:

<marquee behavior="alternate" width="620" bgcolor="#ffcc00">
MARQUEE - BEHAVIOR
</marquee>

LOOP

O atributo loop indica quantas vezes você deseja que seja executada a marquee.
Este vai rodar 4 vezes:

LOOP DE MARQUEE - RODA QUATRO VEZES

Edita-se assim:

<marquee width="620" bgcolor="#ffcc00" loop="4" behavior="alternate">
LOOP DE MARQUEE
</marquee>

Este vai rodar infinitamente:

LOOP DE MARQUEE - RODA INFINITAMENTE

Edita-se assim:

<marquee width="620" bgcolor="#ffcc00" loop="infinite" behavior="alternate">
LOOP DE MARQUEE - INFINITO
</marquee>

EDITAR MARQUEES COM IMAGENS

Você pode criar marquees utilizando imagens, links, links com imagens, etc.
Veja exemplos:
Marquee com imagens

dicas de marquees

Para editar:

<marquee width="300" height="100" behavior="alternate" bgcolor="#ffcc00">
<img src="http://www.novidades1oo.com.br/images/imag/favicon1.jpg">
</marquee>

Marquee utilizando link

MARQUEE COM LINK

Para editar:

<marquee width="450" height="50" behavior="alternate" bgcolor="#cc0000">
<a href="http://www.novidades1oo.com.br/dicas">
NOVIDADES100
</a>
</marquee>

Marquee utilizando links com imagens

dicas de marquees

Para editar:

<marquee width="300" height="100" behavior="alternate" bgcolor="#ffcc00">
<img src="http://www.novidades1oo.com.br/images/imag/favicon1.jpg">
<a href="http://www.novidades100.com.br/dicas">
</a>
</marquee>

PARAR MARQUEE

Pausando e reiniciando a marquee.
como editar marquees com imagens

Para pausar a marquee quando o botão do mouse está sobre ela e reiniciar quando retira, coloque o seguinte script java:

<marquee behavior="alternate" bgcolor="#888888" onmouseover="this.stop();" onmouseout="this.start();">
<a href="http://www.novidades100.com.br/games/godofwar.html">
<img src="http://www.novidades100.com.br/images/gifs/2.gif">
</a>
</marquee>

CONCLUSÃO

Pronto. Aí está uma demonstração básica de marquee, o mais você inventa, cria, transforma.
Obs: As propriedades da marquee você deve editar no arquivo css.
Alguns dos atributos utilizadas nos exemplos acima:

→ border;
→ color;
→ font-size;
→ font-family;
→ font-weight;
→ width;
→ height, entre outras.

É desnecessário dizer que você deve usar sua criatividade alternando, atributos e propriedades.

Veja Também…

Veja como Construir Gadgets
Editar Popup's
Criar Slides com JQuery
Redirecionar Url's em Php, JavaScript e Html
Algumas Funções do Formidável JQuery
Criar Banners para Sites e Blogs
Editar Legendas Ocultas em Videos do You Tube
Atributos e Propriedades de Marquee
Criando Páginas Html
Editar e Enviar Sitemaps para Sites e Blog do Blogspot