Criando uma imagem de rollover no Dreamweaver CS3
No Dreamweaver, imagens de sobreposição - como o nome indica - são projetados para reagir quando alguém rola um cursor sobre uma imagem. O efeito pode ser tão dramática como uma imagem de um cão que está sendo substituída por uma imagem de um leão, ou tão sutil quanto a cor de uma palavra mudando como uma imagem substitui outra. De qualquer maneira, o Dreamweaver inclui uma caixa de diálogo especial para sobreposições que torna a criação de um efeito de sobreposição simples um dos comportamentos mais fácil de aplicar.
Para criar uma imagem de sobreposição, usando a caixa de diálogo Imagem cambiável do Dreamweaver Inserir, siga estes passos:
1. Clique para colocar o cursor na página onde você deseja que o rollover a aparecer.
efeitos de sobreposição exigem pelo menos duas imagens: uma para o estado inicial e um para o estado de rolagem. Você pode usar duas imagens diferentes ou duas outras semelhantes, mas ambos devem ter as mesmas dimensões. Caso contrário, você tem alguns efeitos de escala estranhos porque ambas as imagens devem ser exibidas em exatamente o mesmo espaço na página.
2. Escolha Inserir -> Objetos de imagem -> imagem de sobreposição.
A caixa de diálogo Inserir imagem cambiável aparece.
3. Na caixa Nome da imagem, o nome de sua imagem.
Antes de poder aplicar um comportamento a um elemento, como uma imagem, o elemento deve ter um nome para que o script comportamento pode fazer referência a ela. Você pode nomear elementos que quiser, contanto que você não use espaços ou caracteres especiais.
4. Na caixa de imagem original, especifique a primeira imagem que você quer visível. Use o botão Procurar para localizar e selecionar a imagem.
Se as imagens já não estão em pasta raiz do seu site, o Dreamweaver irá copiá-los para o seu site quando você cria o capotamento.
5. Na caixa Imagem de Rollover, insira a imagem que deseja tornar-se visível quando os visitantes mover seus cursores sobre a primeira imagem.
Novamente, você pode usar o botão Procurar para localizar e selecionar a imagem.
6. Marque a caixa de seleção Imagem Preload Rollover para carregar todas as imagens de sobreposição no cache do navegador quando a página é carregada pela primeira vez.
Se você não optar por fazer esta etapa, os visitantes podem experimentar um atraso porque a segunda imagem não será baixado até um mouse é rolado a imagem original.
7. Na Quando clicado, vá para a caixa de URL, digite qualquer endereço da Web ou navegar para localizar outra página no seu site que você deseja vincular.
Se você não especificar um URL, o Dreamweaver insere automaticamente o sinal # como um espaço reservado.
8. Clique em OK.
As imagens são automaticamente configurado como um capotamento.
9. Clique no ícone de globo na parte superior do espaço de trabalho para visualizar o seu trabalho em um navegador e testar como o rollover trabalha.