Novidades100 - Dicas de Internet e Computador

Criar Marquees em Paginas da Internet

Marquees 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.

Como Construir esta Marquee…

<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).

Como Construir esta Marquee…

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

BGcolor

Agora adicionando o atributo bgcolor.

Como Construir esta Marquee…

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

Scrollamount

Adicionando o atributo scrollamount (velocidade da marquee).

Como Construir esta Marquee…

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

Como Construir esta Marquee…

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

Direction

Agora adicionando o atributo direction (direção).

Como Construir esta Marquee…

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

Como Construir esta Marquee…

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

Como Construir esta Marquee…

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

Como Construir esta Marquee…

<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.

Como Construir esta Marquee…

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

Como Construir esta Marquee…

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

Como Construir esta Marquee…

<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:

Como Construir esta Marquee…

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

Este vai rodar infinitamente:

Como Construir esta Marquee…

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

Marquee com Imagens

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

Como Construir esta Marquee…

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

Marquee com Links

Como Construir esta Marquee…

<marquee width="450" height="50" behavior="alternate" bgcolor="#cc0000">
<a style="color:#fff;font-size:130%;" href="http://www.novidades100.com.br/dicas">NOVIDADES100</a>
</marquee>

Marquee com Links e Imagens

Como Construir esta Marquee…

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

Stop Marquee

Pausando e reiniciando a marquee.

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

Como Construir esta Marquee…

<marquee behavior="alternate" bgcolor="#888888" onmouseover="this.stop();" onmouseout="this.start();">
<a href="http://www.novidades100.com.br/games/"><img src="http://www.novidades100.com.br/dicas/images/god-of-war.jpg"></a>
</marquee>

Conclusão

Pronto. Aí está uma demonstração básica de marquee, o mais você inventa, cria, transforma.
É desnecessário dizer que você deve usar sua criatividade alternando, atributos e propriedades.

| | HomePage | Relatar Problema |