Como criar uma imagem de rollover simples no dreamweaver

Video: Como criar uma imagem Rollover e algumas formas no Dreamweaver

Rollovers são uma característica tão popular que Dreamweaver inclui uma caixa de diálogo especial só para sobreposições: a caixa de diálogo Inserir imagem cambiável. 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ído por uma imagem de um leão, ou tão sutil quanto a cor de uma palavra mudança.

Você pode criar mais efeitos complexos imagem rollover com a opção Trocar imagem a partir do painel Comportamentos. A opção Trocar imagem permite alterar várias imagens ao mesmo tempo.

Para criar um efeito de sobreposição simples com duas imagens usando a caixa de diálogo Imagem cambiável do Dreamweaver Inserir, siga estes passos:

Video: Rollover image tutorial Dreamweaver CS6

1. Coloque o cursor na página onde você deseja que o rollover a aparecer.

   Video: Criar botão Rollover no Dreamweaver CS4 | Help Tutoriais

   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 dois similares, mas ambos devem ter as mesmas dimensões. Caso contrário, você ver os efeitos de escala estranho, porque ambas as imagens devem ser exibidas em exatamente o mesmo espaço na página.

2. Escolha Inserir → Imagem → Imagem cambiável.

   Video: How to create rollover images in Dreamweaver

   Alternativamente, você pode usar a lista suspensa disponível a partir do ícone Imagens no painel Common Inserir e selecione Imagem cambiável.

   A caixa de diálogo Inserir imagem cambiável aparece.

   

3. Na caixa Nome da imagem, o nome da sua imagem.

   Antes que você possa 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 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 na pasta do site local, o Dreamweaver copia-los em seu site quando você criar o rollover.

5. Na caixa Imagem do Rollover, insira a imagem que deseja tornar-se 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. Marque a caixa de seleção Imagem Preload Rollover para carregar todas as imagens de sobreposição em 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é que um cursor é rolado a imagem original.

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

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

8. No Quando clicado, vá para a caixa de URL, digite qualquer endereço na web ou navegar para localizar uma outra página em seu site para o qual pretende ligar.

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

   O sinal # é uma técnica comum para a criação de links que não apontam qualquer lugar. Porque imagens de sobreposição que não link para outra página tem muitos grandes usos, esta técnica é útil. Basta lembrar que se você quiser que o seu capotamento para ligar, você precisa substituir o sinal # com um link para outra página.

9. Clique em OK.

   As imagens são criadas automaticamente como um capotamento.

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

Você pode ver como o seu capotamento funciona no modo de design do Dreamweaver ou usando a opção o Live View. Quando você clica no botão ao vivo no canto superior esquerdo da área de trabalho, você essencialmente transformar Dreamweaver em um navegador da Web que exibe páginas muito parecido com o navegador Chrome.

Quando você está visualizando uma página em seu computador que inclui uma imagem de rollover, alguns navegadores irá exibir um aviso informando que você deve permitir que os controles ActiveX para visualizar a página. Este é um aviso de segurança que aparece somente quando a página é aberta no mesmo computador em que a página é salva.

Se você publicar a página para um servidor web e, em seguida, vê-lo através de uma conexão Internet, você e os visitantes do site não verá este erro.