Como fazer um banner expansível com JavaScript

Escrito por cathlene s. baptista | Traduzido por paula mangia garcia terra
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer um banner expansível com JavaScript
O JavaScript pode ser usado para expandir dinamicamente os banners em páginas web (Ablestock.com/AbleStock.com/Getty Images)

Um dos recursos mais úteis de programas de linguagem de cliente (client-side) como o JavaScript é que eles podem ser usados ​​para modificar dinamicamente as interfaces do usuário em páginas web. Embora programas de linguagem do servidor (server-side), como PHP ou Perl, também possam ser usados para modificar elementos da página web, sua utilização requer uma solicitação do servidor, um processo que tipicamente interrompe a experiência do usuário. Elementos de página dinâmicos, como banners expansíveis, textos estendidos e mudanças de layouts são bem adaptados para uma linguagem que responde imediata e diretamente à interação do usuário com as alterações de página.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Editor de texto
  • Navegador com JavaScript habilitado

Lista completaMinimizar

Instruções

  1. 1

    Abra um editor de texto e crie um novo arquivo com nome expandBanner.html. Na maioria destes programas, é possível criar novos arquivos selecionado "Novo" a partir do menu "Arquivo". Adicione algumas tags de HTML básicas ao arquivo, incluindo “<html>,” “<head>,” “</head>,” “<body>,” “</body>” e “</html>.”

    <html> <head></head> <body></body> </html>

  2. 2

    Adicione a tag "<div>" entre as tags “<body>” e “</body>” do arquivo expandBanner.html. Atribua os seguintes atributos à tag <div>: id; "mybanner," style; "background:blue," "border:1px solid," "height:30px" e "width:100px". Adicione uma tag de encerramento "</div>" para concluir o banner. Enquanto o atributo "id" deve ser "mybanner", os valores de atributo de estilo podem ser alterados para adaptar-se à interface do usuário.

    <div id="myBanner" style="background:blue;border:1px solid;height:30px;width:100px;"> </div>

  3. 3

    Adicione uma tag de âncora ("<a>") após a tag de encerramento "</div>" . Defina o atributo "href" da tag de âncora para "#", dê à âncora o texto "Clique para Expandir o Banner," e feche a tag "</ a>".

    <a href="#">Click to Expand Banner</a>

  4. 4

    Adicione um evento "onclick" à tag de âncora que chama uma função chamada "expandBanner".

    <a href="#" onclick="expandBanner()">Clique para Expandir o Banner</ a>

  5. 5

    Adicione um delimitador JavaScript de abertura (“<script type="text/javascript">") e um delimitador JavaScript de encerramento ("</ script>") ao expandBanner.html. e coloque os delimitadores entre as tags "<head>" e "</ head>".

    <script type="text/javascript"> </script>

  6. 6

    Adicione uma função chamada "expandBanner" entre as tags <script type="text/javascript">” e “</script>” do expandBanner.html. Esta função define o foco para o div "mybanner" e o expande, mudando sua largura de 100px para 200px. Salve e feche o expandBanner.html. Após o passo 6, expandBanner.html aparece conforme segue:

    <html> <head> <script type="text/javascript"> function expandBanner() { document.getElementById('myBanner').style.width = '200px'; } </script> </head> <body> <div id="myBanner" style="background:blue;border:1px solid;height:30px;width:100px;"> </div> <a href="#" onclick="expandBanner()">Click to Expand Banner</a> </body> </html>

  7. 7

    Abra o expandBanner.html em um navegador. Clique no hiperlink "Clique para expandir o Banner" e verifique que o banner azul expande de 100px para 200px.

Dicas & Advertências

  • Os banners expansíveis com JavaScript não estão limitados às características de largura. O JavaScript pode mudar praticamente qualquer atributo de banner, inclusive a sua cor, altura ou referência de imagem.
  • Os banners podem ser expandidos usando uma variedade de eventos, tais como onMouseOver, onChange ou onBlur e banners que utilizam gráficos podem ser expandidos para ajustá-los usando as propriedades de atributos excedentes.
  • Expandir os elementos da página pode provocar a alteração de locais de elementos circundantes e destruir o layout da página.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível