Vídeo: Dreamweaver - Rollover Images - www.mxmasters.com.br 2024
No Dreamweaver, imagens de rolagem - 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ático quanto a imagem de um cão sendo substituído por uma imagem de um leão, ou tão sutil quanto a cor de uma palavra mudando à medida que uma imagem substitui outra. De qualquer forma, o Dreamweaver inclui uma caixa de diálogo especial para rollovers que torna a criação de um efeito de rolagem simples um dos comportamentos mais fáceis de aplicar.
Para criar uma imagem de rolagem usando a caixa de diálogo Rollover da imagem de inserção do Dreamweaver, siga estas etapas:
1. Clique para colocar seu cursor na página em que deseja que o rollover apareça.
Os efeitos de rolagem exigem pelo menos duas imagens: uma para o estado inicial e outra para o estado de rolagem. Você pode usar duas imagens diferentes ou duas semelhantes, mas ambas devem ter as mesmas dimensões. Caso contrário, você obtém alguns efeitos de escala estranhos porque ambas as imagens devem ser exibidas exatamente no mesmo espaço na página.
2. Escolha Inserir -> Objetos de imagem -> Imagem de rolagem.
A caixa de diálogo Inserir rollover Image aparece.
3. Na caixa Nome da imagem, nomeie sua imagem.
Antes de poder aplicar um comportamento a um elemento, como uma imagem, o elemento deve ter um nome para que o script de comportamento possa fazer referência a ele. Você pode nomear elementos que você quiser, desde que não use espaços ou caracteres especiais.
4. Na caixa Imagem original, especifique a primeira imagem que deseja visível. Use o botão Procurar para localizar e selecionar a imagem.
Se as imagens ainda não estiverem na pasta raiz do seu site, o Dreamweaver os copiará em seu site quando você criar a rolagem.
5. Na caixa Rollover Image, insira a imagem que deseja se tornar visível quando os visitantes movem seus cursores sobre a primeira imagem.
Novamente, você pode usar o botão Procurar para localizar e selecionar a imagem.
6. Selecione a caixa de seleção Preload Rollover Image para carregar todas as imagens de rolagem no cache do navegador quando a página primeiro for carregada.
Se você não optar por fazer este passo, seus visitantes podem sofrer um atraso porque a segunda imagem não será baixada até que um mouse seja rolado sobre a imagem original.
7. Na caixa Quando clicado, Ir para URL, insira qualquer endereço da Web ou navegue para localizar outra página no seu site ao qual deseja vincular.
Se você não especificar um URL, o Dreamweaver automaticamente insere o sinal # como um espaço reservado.
8. Clique OK.
As imagens são configuradas automaticamente como rollover.
9. Clique no ícone do globo na parte superior do espaço de trabalho para visualizar seu trabalho em um navegador e testar como a rolagem funciona.
