Imagem Rollovers em Adobe CS5 Dreamweaver - dummies

No Adobe Creative Suite 5 (Adobe CS5) Dreamweaver, você pode inserir objetos de imagem, incluindo marcadores de posição de imagem, imagens de rolagem (imagens que mudam quando um espectador rola o mouse sobre a imagem), barras de navegação, e Fireworks HTML. Você acessa esses objetos de imagem escolhendo Inserir → Objetos de imagem.

1Crie as imagens a serem usadas como rollover.

Você pode gerar essas imagens no Fireworks, Illustrator, Photoshop ou em qualquer outro aplicativo capaz de salvar imagens otimizadas para a web.

2 Coloque o cursor na página onde quer que a rolagem apareça.

Escolha Inserir → Objetos de imagem → Rollover Image ou clique no botão Rollover Image no painel Inserir. A caixa de diálogo Inserir rollover Image.

3 Nome da imagem.

Digite um nome de imagem sem espaços no campo de texto Nome da imagem. Esse nome é usado no script criando o rollover.

4Clique nos botões Procurar.

O botão Procurar está à direita dos campos de texto Imagem original e Rollover Image. Localize a imagem que deseja exibir como padrão na página e a imagem que aparece somente quando alguém desloca o mouse sobre a imagem.

5Lave a caixa de seleção Preload Rollover Image selecionada.

Esta opção baixa a imagem de rolagem quando a página é baixada para evitar atrasos nos rollovers.

6Descreva a imagem.

Digite o texto alternativo apropriadamente descritivo no campo de texto Alt.

7Complete o campo de texto Quando clicado, Ir para URL.

Isso direciona o Dreamweaver onde os visitantes são direcionados quando eles clicam na imagem de rolagem. Você pode clicar no botão Procurar para localizar outra página em seu site ou inserir uma URL. Nota: Se você estiver vinculando um site diferente, você deve incluir o prefixo // no início do URL.

Se você ainda não possui um link real para usar para um botão ou hiperlink, você pode inserir um sinal de libra (#) para criar um link morto. O link ou botão aparece clicável, mas não vai a qualquer lugar quando clicado. Esta opção é melhor do que acertar a barra de espaço para criar um espaço vazio como um link, pois isso exibirá um erro de página não encontrado quando clicado.

8Clique em OK.

A imagem de rollover é criada na página.

9Previse a imagem.

Para visualizar a nova imagem de rolagem, escolha Arquivo → Visualizar no navegador ou clique no botão Exibir ao vivo na barra de ferramentas Documento.