Como criar Rollovers no Adobe Dreamweaver CS6 - dummies

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

Para criar uma imagem de rolagem, siga estas etapas:

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. Para obter melhores resultados, crie imagens que tenham exatamente a mesma largura e altura.

2 Coloque o cursor na página onde quer que o rollover apareça e 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 aparece.

3 Digite um nome de imagem sem espaços no campo de texto Nome da imagem.

Este nome é usado no script criando o rollover.

4Clique nos botões Procurar à direita dos campos de texto Imagem original e Rollover Image para localizar a imagem que deseja exibir como padrão na página.

A imagem aparece apenas quando alguém desloca o ponteiro do 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.

6Type apropriadamente texto descritivo alt.

Claro, você digitaria no campo de texto Alt.

7 No campo de texto Quando clicado, Ir para URL, diga ao Dreamweaver onde os visitantes são direcionados quando clicam em sua imagem de rolagem.

Você pode clicar no botão Procurar para localizar outra página em seu site ou inserir uma URL.

Se você estiver vinculando um site diferente, você deve incluir o prefixo // no início do URL. Se você deixar este em branco, o Dreamweaver adicionará um link inoperante (#) automaticamente.

8Clique em OK.

A imagem de rollover é criada na página.

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

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 pressionar a barra de espaço para criar um espaço vazio como um link, porque esse link exibirá um erro de página não encontrada quando clicado.