Como criar a função de passar o mouse em uma animação no Dreamweaver

Escrito por william harrel | Traduzido por césar campos
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar a função de passar o mouse em uma animação no Dreamweaver
Crie no Dreamweaver uma animação para quando passar o mouse (Photos.com/Photos.com/Getty Images)

O ato de passar o mouse sobre animações, também conhecido como "rollover", altera a aparência de um gráfico, normalmente um botão em um página da internet. Esse efeito é geralmente criado com duas versões do gráfico, a "Up-state" que é o estado normal do botão e a "Over-state" que exibe uma imagem quando o cursor é passado sobre a figura. Você pode criar funções de "Rollover" no Adobe Dreamweaver, um programa de projeto de página da internet, com o recurso de imagem de sobreposição do programa.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Adobe Dreamweaver CS2 ou versão posterior
  • Duas versões do mesmo gráfico, uma para o "Up state" e outra para o "Over state".

Lista completaMinimizar

Instruções

  1. 1

    Abra o arquivo HTML do Dreamweaver que contém a imagem que você quer fazer uma sobreposição ou inicie uma nova página HTML clicando no menu "File" (Arquivo) e escolha "New" (Novo). Isso abrirá a caixa de diálogo "New Document" (Documento Novo). Escolha "HTML" na lista "Type" (Tipo) e a apresentação desejada na lista de "Layout" e clique no botão "Create" (Criar).

  2. 2

    Clique no menu "Arquivo" e escolha "Salvar como". Isso abrirá a respectiva caixa de diálogo. Nomeie e salve a página.

  3. 3

    Clique na página onde você quer criar uma sobreposição.

  4. 4

    Clique no menu "Insert" (Inserir), escolha "Image Objects" (Objetos da Imagem) e selecione "Rollover Image" (Imagem Sobreposta) do menu. Isso abrirá a caixa de diálogo "Insert Rollover Image" (Inserir Imagem de Sobreposição).

  5. 5

    Clique no botão "Browse" (Navegar) perto do campo "Original Image" (Imagem Original). A respectiva caixa de diálogo aparecerá. Navegue até o gráfico "Up" selecione-o e escolha "OK".

    Você pode criar os gráficos "Up" e "Over" em um editor apropriado como o Adobe Photoshop ou pode baixar os pares de botão de estado dentre os vários sites na internet que oferecem gráficos de botão grátis.

  6. 6

    Clique no botão "Browse" (Navegar) perto do campo "Rollover Image" (Imagem Sobreposta). A caixa apropriada abrirá. Navegue até o gráfico "Over", selecione-o e escolha "OK".

  7. 7

    Digite a URL para esse botão no campo "When Clicked, Go to URL" (Quando clicado, Vá para URL). Esta é a página da internet que você quer carregar quando o usuário clicar no botão.

  8. 8

    Clique no botão "Live View" (Visualização ao Vivo) localizado abaixo da barra de menus. Ativá-lo permite que você teste o recurso de "rollover".

  9. 9

    Passe o cursor sobre o gráfico para ver o efeito.

Dicas & Advertências

  • Quando você carregar essa página da internet em um servidor da web não se esqueça de fazer o upload de duas imagens. Caso contrário, o efeito de "rollover" não funcionará.

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