Como criar Swaps com várias imagens no Dreamweaver - dummies

Antes de começar a criar um design de página mais complexo com o comportamento da Swap Image da Dreamweaver, veja Uma página terminada. Com o comportamento de Swap Image, você pode substituir qualquer ou todas as imagens em uma página.

Quando você usa o comportamento Swap Image, é importante fazer todas as imagens que você trocará no mesmo tamanho (altura e largura). Se as imagens não tiverem o mesmo tamanho, todas as imagens, exceto a primeira, serão esticadas ou compactadas para se ajustarem ao espaço ocupado pela primeira imagem inserida na página.

Se você estiver usando o comportamento Swap Image com uma série de imagens que não têm a mesma altura e largura, você tem algumas opções:

Recortar os maiores para que todas as imagens tenham o mesmo tamanho.

Faça imagens horizontais e verticais ocupando o mesmo espaço em seu design, combinando duas imagens verticais para cada uma horizontal. Basta criar um arquivo em um programa como o Photoshop, insira duas imagens verticais no mesmo arquivo lado a lado e, em seguida, dimensione essa imagem para que o arquivo seja do mesmo tamanho que uma imagem horizontal.

Crie um arquivo de imagem do tamanho da sua imagem maior, defina o plano de fundo para uma cor neutra, como preto ou branco e, em seguida, insira todas as outras imagens no fundo para que você possa salvá-las todas com o mesmo tamanho de arquivo.

Siga estas etapas para usar o comportamento Swap Image:

1Crie um design de página com todas as imagens que você deseja exibir inicialmente.

Cada uma das três fotos no design da página da Tower Bridge em Londres tem duas cópias: uma miniatura e uma versão maior. Quando a página primeiro é carregada em um navegador da Web, as três imagens em miniatura estão posicionadas na parte inferior da página, com a primeira das versões maiores correspondentes exibidas na área principal logo acima das miniaturas.

2 Nomeie suas imagens no Inspetor de propriedades.

Para segmentar suas imagens com JavaScript, como funciona o comportamento, primeiro dê a cada imagem um ID exclusivo. O ID da imagem não é o mesmo que o nome da imagem ou a etiqueta de texto, embora você possa usar o mesmo nome ou nomes semelhantes. As IDs de imagens não devem ter espaços ou nenhum caractere especial.

3 Escolha a janela → Comportamentos.

O painel Comportamentos é aberto. Você pode arrastar o painel Behaviors em outro lugar da página, e você pode expandi-lo arrastando a parte inferior ou lateral. Você também pode querer fechar qualquer outro painel aberto para fazer mais espaço clicando na barra cinza escuro na parte superior de qualquer painel.

4Selecione uma imagem.

Selecione a imagem na página que servirá de gatilho para a ação.

5 Escolha o comportamento da imagem de troca.

Com a imagem de gatilho selecionada no espaço de trabalho, clique no sinal de mais no painel Comportamentos para abrir a lista suspensa de ações e escolha a ação que deseja aplicar.

6Specifique as imagens para trocar na caixa de diálogo Swap Image.

Na lista Imagens, selecione a ID para a imagem que será substituída. Clique no botão Procurar para selecionar a imagem que substitui a imagem principal. Se a imagem ainda não estiver salva na pasta do site local, o Dreamweaver irá oferecer para copiá-lo para você.

7 Na parte inferior da caixa de diálogo Swap Image, selecione a opção Preload Images para instruir o navegador a carregar todas as imagens no cache quando a página estiver carregada.

Se você não selecionar esta opção, pode ocorrer um atraso quando o swap de imagem é usado.

8 Se desejar, desmarque a opção Restore Images OnMouseOut.

A opção Restore Images OnMouseOut significa que, quando um evento for concluído (como quando o mouse é deslocado para fora da miniatura desencadeante), a imagem original é substituída. Por padrão, o Dreamweaver pré-seleciona esta opção para o comportamento de Swap Image. Você pode querer desmarcar essa opção se achar que a substituição da imagem original cada vez que você rola o cursor sobre outra miniatura está distraindo.

9 Depois de especificar todas as configurações do comportamento, clique em OK.

O novo comportamento aparece no painel Comportamentos.

10Specifique um evento para o comportamento.

Após a ação ser aplicada, você pode voltar e especificar qual evento irá desencadear a ação. Por padrão, o Dreamweaver aplica o evento OnMouseOver quando você usa a ação Swap Image, mas você pode mudar esse evento para qualquer disponível, como o OnClick, que exige que o usuário clique na imagem para ativar a ação Swap Image.

11 Aplicar comportamentos adicionais.

Para aplicar o comportamento Swap Image a outras imagens em uma página, repita as Etapas 5-10, clicando para selecionar a imagem que deseja servir como gatilho e, em seguida, especificando a imagem correspondente que deve ser trocada.

12Teste seu trabalho em um navegador.

Você não pode ver os efeitos de comportamentos como esse até você clicar no botão Live View no canto superior esquerdo do espaço de trabalho no Dreamweaver ou visualizar sua página em um navegador da Web.