Como criar swaps com várias imagens em 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 acabada. Com o comportamento Trocar imagem, você pode substituir qualquer ou todas as imagens em uma página.

Video: Juntar diversas imagens (jpg, gif, png) num único PDF

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, exceto a primeira será esticado ou comprimido para caber no espaço ocupado pela primeira imagem inserida na 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 que todas as imagens são do 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, inserir duas imagens verticais no lado ficheiro 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, definir o plano de fundo para 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 do arquivo.

Siga estes passos para utilizar o comportamento Trocar imagem:

1Criar um design de página com todas as imagens que deseja exibir inicialmente

Cada um dos três fotos no design de página para a Tower Bridge em Londres tem duas cópias: uma miniatura e uma versão maior. Quando a página carrega pela primeira vez em um navegador web, todas as três imagens em miniatura são posicionados na parte inferior da página, com o primeiro dos correspondentes versões maiores exibidos na principal área logo acima das miniaturas.

2Nome 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. O ID da imagem não é o mesmo que o nome do arquivo de imagem ou o texto tag, embora você possa usar os mesmos nomes ou nomes semelhantes. IDs de imagem não deve ter espaços ou caracteres especiais.

4Selecione uma imagem

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

6Especificar 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ê.

Video: Juntar diversas imagens (jpg, gif, png) num único PDF

10Especificar 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 disponíveis, tais como onclick, que exige que o usuário clique na imagem para disparar a ação Trocar imagem.

12Teste 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 pré-visualizar a página em um navegador web.