Como criar uma imagem de rolagem simples no Dreamweaver - manequins

Rollovers são uma característica tão popular que o Dreamweaver inclui uma caixa de diálogo especial apenas para rollovers: a caixa de diálogo Inserir rollover Image. As imagens de rolagem, como o nome indica, são projetadas 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 mudança de palavra.

Você pode criar efeitos de imagem de rollover mais complexos com a opção Swap Image no painel Behaviors. A opção Swap Image permite que você altere várias imagens ao mesmo tempo.

Para criar um efeito de rollover simples com duas imagens usando a caixa de diálogo de inserção de rolagem de imagem do Dreamweaver, siga estas etapas:

1. Coloque o cursor na página em que deseja que a rolagem 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 similares, mas ambas devem ter as mesmas dimensões. Caso contrário, você verá efeitos de escala estranhos porque ambas as imagens devem ser exibidas exatamente no mesmo espaço na página.

2. Escolha Inserir → Imagem → Rollover Image.

   Como alternativa, você pode usar a lista suspensa disponível no ícone Imagens no painel Inserção comum e selecione 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 sua pasta do site local, o Dreamweaver as copia para o seu site quando você criar a rolagem.

5. Na caixa Rollover Image, digite a imagem que deseja se tornar visível quando um visitante move o cursor 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 esta etapa, seus visitantes podem experimentar um atraso porque a segunda imagem não será baixada até que um cursor seja rolado sobre a imagem original.

7. No campo Texto alternativo, insira uma descrição das imagens.

   O texto alternativo é opcional mas recomendado porque o uso de palavras-chave pode melhorar a otimização do mecanismo de pesquisa.Da mesma forma, o texto alternativo é uma parte fundamental da acessibilidade da web, porque este texto é lido em voz alta por navegadores especiais chamados leitores de tela, que são usados ​​por pessoas cegas e outras com visão ou mobilidade limitada. O texto alternativo é exibido apenas no navegador se as imagens não estiverem visíveis.

8. Na caixa Quando clicado, Ir para URL, insira qualquer endereço da Web ou navegue para localizar outra página em seu site ao qual deseja vincular.

   Se você não especificar um URL, o Dreamweaver insere automaticamente o sinal # como espaço reservado no código.

   O sinal # é uma técnica comum para criar links que não ligam em qualquer lugar. Como as imagens de rolagem que não vinculam a outra página têm muitos usos fantásticos, essa técnica é útil. Basta lembrar que, se você quer que sua rolhaver se vincule, você precisa substituir o # sinal com um link para outra página.

9. Clique em OK.

   As imagens são configuradas automaticamente como rollover.

10. Para ver o rollover em ação, salve o arquivo e clique no ícone do globo na parte superior do espaço de trabalho para visualizar sua página em um navegador da Web.

Você pode ver como seu rollover funciona na visão de design do Dreamweaver ou usando a opção Live view. Quando você clica no botão Live, no canto superior esquerdo do espaço de trabalho, você basicamente transforma o Dreamweaver em um navegador da Web que exibe páginas como o navegador Chrome.

Quando você está visualizando uma página em seu computador que inclui uma imagem de rolagem, alguns navegadores da Web exibirão um aviso informando que você deve permitir controles ActiveX para visualizar a página. Este é um aviso de segurança que aparece apenas quando a página é aberta no mesmo computador onde a página é salva.

Se você publicar a página em um servidor web e depois visualizá-lo através de uma conexão com a Internet, você e os visitantes do seu site não verão esse erro.

Crédito: obra de istockphoto. com