Como criar um Sobreposição simples imagem no Dreamweaver
Rollovers são uma característica tão popular que Dreamweaver inclui uma caixa de diálogo especial apenas 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ída 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 de sobreposição com a opção Trocar imagem no 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:
Coloque 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ê ver os efeitos de escala estranhos porque ambas as imagens devem ser exibidas em exatamente o mesmo espaço na página.
Escolha Inserir-Imagem-Imagem cambiável.
Alternativamente, você pode usar a lista drop-down disponíveis a partir do ícone Imagens no painel Common Inserir e selecione Imagem cambiável.
A caixa de diálogo Inserir imagem cambiável aparece.
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.
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 capotamento.
Na caixa Imagem de 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.
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é que um cursor é lançado sobre a imagem original.
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 utilizados 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.
No Quando clicado, vá para a caixa de URL, digite qualquer endereço da 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 possuem links para outra página tem muitos grandes usos, esta técnica é útil. Basta lembrar que se você quiser que o seu rollover para conectar-se, você precisa substituir o sinal # com um link para outra página.
Clique em OK.
As imagens são criadas automaticamente como um capotamento.
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 da 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 sobreposição, alguns navegadores da Web 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 onde a página é salva.
Se você publicar a página para um servidor web e, em seguida, visualizá-lo através de uma conexão de Internet, você e os visitantes do site não vai ver esse erro.
