Como criar Swaps com várias imagens no Dreamweaver
Antes de começar a criar um design de página mais complexa com o comportamento Trocar imagem do Dreamweaver, olhe para uma página acabado. Com o comportamento Trocar imagem, você pode substituir qualquer ou todas as imagens em uma página.
Menu
- Nome suas imagens no inspetor de propriedades.
- Escolha window-comportamentos.
- Especificar as imagens para trocar na caixa de diálogo trocar imagem.
- Na parte inferior da caixa de diálogo trocar imagem, selecione a opção pré-carregar imagens para instruir o navegador para carregar todas as imagens no cache quando a página é carregada.
- Se você quiser, desmarque os restaurar imagens onmouseout opção.
- Depois de especificar todas as configurações para o comportamento, clique em ok.
- Especificar um evento para o comportamento.
- Aplicar comportamentos adicionais.
- Teste o seu trabalho em um navegador.
Quando você usa o comportamento Trocar imagem, é importante fazer todas as imagens que você vai trocar o mesmo tamanho (altura e largura). Se as imagens não são do mesmo tamanho, todas as imagens, com excepção do primeiro será esticada ou comprimida para se ajustar ao espaço ocupado pela primeira imagem inserida para dentro da página.
Se você estiver usando o comportamento Trocar imagem com uma série de imagens que não são todos a mesma altura e largura, você tem algumas opções:
Cortar os maiores de modo a que todas as imagens tenham o mesmo tamanho.
Fazer imagens horizontais e verticais ocupam o mesmo espaço em seu projeto através da combinação de duas imagens verticais para cada um horizontal. Basta criar um arquivo em um programa como o Photoshop, insira duas imagens verticais para o lado de arquivo mesmo a lado, e em seguida, dimensione a imagem para que o arquivo é do mesmo tamanho que uma imagem horizontal.
Criar um arquivo de imagem do tamanho do seu maior imagem, defina o fundo a uma cor neutra, como preto ou branco, e em seguida, insira todas as outras imagens para o fundo para que você possa salvá-los todos com o mesmo tamanho de arquivo.
Siga estes passos para utilizar o comportamento Trocar imagem:
Nome suas imagens no Inspetor de propriedades.
Para direcionar suas imagens com javascript, que é como os comportamentos trabalhar, em primeiro lugar dar a cada imagem uma identificação única. A ID da imagem não é o mesmo que o nome do arquivo de imagem ou a etiqueta de texto, embora você possa usar os mesmos nomes ou nomes semelhantes. IDs de imagem não deve ter espaços ou caracteres especiais.
Escolha Window-Comportamentos.
O painel Behaviors abre. Você pode arrastar o painel Comportamentos outro lugar na página, e você pode expandi-lo arrastando sua parte inferior ou lateral. Você também pode querer fechar quaisquer outros painéis abertos para dar mais espaço clicando na barra cinza escuro na parte superior de qualquer painel.
Especificar as imagens para trocar na caixa de diálogo Trocar imagem.
Na lista Imagens, selecione o ID para a imagem que será substituído. Clique no botão Procurar para selecionar a imagem que substitui a imagem principal. Se a imagem não estiver guardado na pasta do site local, o Dreamweaver irá oferecer para copiá-lo lá para você.
Na parte inferior da caixa de diálogo Trocar imagem, selecione a opção Pré-carregar imagens para instruir o navegador para carregar todas as imagens no cache quando a página é carregada.
Se você não selecionar essa opção, um atraso pode ocorrer quando a troca de imagem é usada.
Se você quiser, desmarque os restaurar imagens onmouseout opção.
As imagens Restaurar onmouseout opção significa que quando um evento é concluída (como quando o mouse é movido para fora da miniatura desencadeamento), a imagem original é substituído. Por padrão, o Dreamweaver pré-seleciona esta opção para o comportamento Trocar imagem. Você pode querer desmarcar esta opção se você achar que substituir a imagem original de cada vez que rolar o cursor sobre uma outra miniatura é perturbador.
Depois de especificar todas as configurações para o comportamento, clique em OK.
O novo comportamento é exibido no painel Behaviors.
Especificar um evento para o comportamento.
Após a ação é aplicada, você pode voltar e especificar qual evento irá desencadear a ação. Por padrão, o Dreamweaver aplica o onmouseover evento quando você usa a ação Trocar imagem, mas você pode alterar esse evento para qualquer um disponível, como onclick, que exige que o usuário clique na imagem para disparar a ação Trocar imagem.
Aplicar comportamentos adicionais.
Para aplicar o comportamento Trocar imagem a outras imagens em uma página, repita os passos 5-10, clicando para selecionar a imagem que pretende servir como um gatilho e, em seguida, especificando a imagem correspondente que deve ser trocado.
Teste o seu trabalho em um navegador.
Você não pode ver os efeitos de comportamentos como este até que você clique no botão Exibição ao vivo no canto superior esquerdo da área de trabalho no Dreamweaver ou visualizar a página em um navegador web.